diff --git a/hotel-management/src/components/ButtonIcon/ButtonIcon.tsx b/hotel-management/src/components/ButtonIcon/index.tsx similarity index 100% rename from hotel-management/src/components/ButtonIcon/ButtonIcon.tsx rename to hotel-management/src/components/ButtonIcon/index.tsx diff --git a/hotel-management/src/components/Form/index.tsx b/hotel-management/src/components/Form/index.tsx index 99e2782..c0727ac 100644 --- a/hotel-management/src/components/Form/index.tsx +++ b/hotel-management/src/components/Form/index.tsx @@ -1,7 +1,13 @@ import { FormEvent, ReactNode } from 'react'; // Styled -import { StyledActionBtn, StyledForm } from './styled'; +import { + StyledActionBtn, + StyledForm, + Error, + Label, + StyledFormRow, +} from './styled'; interface IFormProps { children: ReactNode; @@ -9,6 +15,12 @@ interface IFormProps { id?: string; } +interface IFormRow { + label: string; + error?: string; + children: ReactNode; +} + const Form = ({ children, onSubmit, id }: IFormProps) => { return ( @@ -17,6 +29,20 @@ const Form = ({ children, onSubmit, id }: IFormProps) => { ); }; + +const FormRow = ({ label, error, children }: IFormRow) => { + return ( + + +
+ {children} + {error && {error}} +
+
+ ); +}; + +Form.Row = FormRow; Form.Action = StyledActionBtn; export default Form; diff --git a/hotel-management/src/components/Form/styled.ts b/hotel-management/src/components/Form/styled.ts index bc154c3..988dd38 100644 --- a/hotel-management/src/components/Form/styled.ts +++ b/hotel-management/src/components/Form/styled.ts @@ -13,4 +13,26 @@ const StyledActionBtn = styled.div` gap: 100px; `; -export { StyledForm, StyledActionBtn }; +const StyledFormRow = styled.div` + display: flex; + justify-content: space-between; + align-items: center; + gap: 100px; +`; + +const Label = styled.label` + font-size: var(--fs-sm); + text-transform: capitalize; +`; + +const Error = styled.p` + color: var(--error-text); + font-size: var(--fs-sm-2x); + + margin-top: 5px; + padding-inline: 5px; + + width: 220px; +`; + +export { StyledForm, StyledActionBtn, StyledFormRow, Label, Error }; diff --git a/hotel-management/src/components/HeaderMenu/index.tsx b/hotel-management/src/components/HeaderMenu/index.tsx index 8365978..9a5cd93 100644 --- a/hotel-management/src/components/HeaderMenu/index.tsx +++ b/hotel-management/src/components/HeaderMenu/index.tsx @@ -1,7 +1,7 @@ // Components import { IoPersonCircleOutline } from 'react-icons/io5'; import { HiOutlineLogout } from 'react-icons/hi'; -import ButtonIcon from '@component/ButtonIcon/ButtonIcon'; +import ButtonIcon from '@component/ButtonIcon'; // Styled import { StyledHeaderMenu } from './styled'; diff --git a/hotel-management/src/components/LabelControl/index.tsx b/hotel-management/src/components/LabelControl/index.tsx deleted file mode 100644 index cb57530..0000000 --- a/hotel-management/src/components/LabelControl/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { ReactNode } from 'react'; - -// Styled -import { Error, Label, StyledFormRow } from './styled'; - -interface IFormRow { - label: string; - error?: string; - children: ReactNode; -} - -const FormRow = ({ label, error, children }: IFormRow) => { - return ( - - -
- {children} - {error && {error}} -
-
- ); -}; - -export default FormRow; diff --git a/hotel-management/src/components/LabelControl/styled.ts b/hotel-management/src/components/LabelControl/styled.ts deleted file mode 100644 index 587fabc..0000000 --- a/hotel-management/src/components/LabelControl/styled.ts +++ /dev/null @@ -1,25 +0,0 @@ -import styled from 'styled-components'; - -const StyledFormRow = styled.div` - display: flex; - justify-content: space-between; - align-items: center; - gap: 100px; -`; - -const Label = styled.label` - font-size: var(--fs-sm); - text-transform: capitalize; -`; - -const Error = styled.p` - color: var(--error-text); - font-size: var(--fs-sm-2x); - - margin-top: 5px; - padding-inline: 5px; - - width: 220px; -`; - -export { StyledFormRow, Label, Error }; diff --git a/hotel-management/src/components/Menus/index.tsx b/hotel-management/src/components/Menus/index.tsx index e985f51..58f36b7 100644 --- a/hotel-management/src/components/Menus/index.tsx +++ b/hotel-management/src/components/Menus/index.tsx @@ -14,7 +14,7 @@ import MenusContext from '@context/MenuContext'; // Types import { Nullable } from '@type/common'; -import ButtonIcon from '@component/ButtonIcon/ButtonIcon'; +import ButtonIcon from '@component/ButtonIcon'; import { COLOR } from '@constant/styles'; interface IButton { diff --git a/hotel-management/src/pages/Room/RoomForm.tsx b/hotel-management/src/pages/Room/RoomForm.tsx index 971ae28..d33bc64 100644 --- a/hotel-management/src/pages/Room/RoomForm.tsx +++ b/hotel-management/src/pages/Room/RoomForm.tsx @@ -18,7 +18,6 @@ import { REGEX } from '../../constants/commons.ts'; import { isValidRegex, isValidString } from '@helper/validators.ts'; // Components -import FormRow from '@component/LabelControl/index.tsx'; import Form from '@component/Form/index.tsx'; // Hooks @@ -83,7 +82,7 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => { return (
- + { onChange: () => trigger('name'), })} /> - + - + { onChange: () => trigger('price'), })} /> - + { return ( - + { onChange: () => trigger('name'), })} /> - + - + { onChange: () => trigger('phone'), })} /> - +