Merge pull request #31 from Nez27/feat/update-components-ui

Update components UI

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 (
     <StyledForm onSubmit={onSubmit} id={id}>
@@ -17,6 +29,20 @@ const Form = ({ children, onSubmit, id }: IFormProps) => {
   );
 };
 
+
+const FormRow = ({ label, error, children }: IFormRow) => {
+  return (
+    <StyledFormRow>
+      <Label>{label}</Label>
+      <div>
+        {children}
+        {error && <Error>{error}</Error>}
+      </div>
+    </StyledFormRow>
+  );
+};
+
+Form.Row = FormRow;
 Form.Action = StyledActionBtn;
 
 export default Form;

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 };

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';

hotel-management/src/components/LabelControl/index.tsx

@@ -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 (
-    <StyledFormRow>
-      <Label>{label}</Label>
-      <div>
-        {children}
-        {error && <Error>{error}</Error>}
-      </div>
-    </StyledFormRow>
-  );
-};
-
-export default FormRow;

hotel-management/src/components/LabelControl/styled.ts

@@ -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 };

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 {

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 (
     <Form onSubmit={handleSubmit(onSubmit)}>
-      <FormRow label="Name" error={errors?.name?.message}>
+      <Form.Row label="Name" error={errors?.name?.message}>
         <Input
           type="text"
           id="name"
@@ -96,9 +95,9 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => {
             onChange: () => trigger('name'),
           })}
         />
-      </FormRow>
+      </Form.Row>
 
-      <FormRow label="Price" error={errors?.price?.message}>
+      <Form.Row label="Price" error={errors?.price?.message}>
         <Input
           type="text"
           id="price"
@@ -113,7 +112,7 @@ const RoomForm = ({ onCloseModal, room }: IRoomFormProp) => {
             onChange: () => trigger('price'),
           })}
         />
-      </FormRow>
+      </Form.Row>
 
       <Form.Action>
         <FormBtn

hotel-management/src/pages/User/UserForm.tsx

@@ -8,7 +8,6 @@ import Input from '@commonStyle/Input.ts';
 
 // Components
 import Form from '@component/Form/index.tsx';
-import FormRow from '@component/LabelControl/index.tsx';
 
 // Helpers
 import { isValidRegex } from '@helper/validators.ts';
@@ -76,7 +75,7 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
   return (
     <FormProvider {...formMethods}>
       <Form onSubmit={handleSubmit(onSubmit)}>
-        <FormRow label="Full Name" error={errors?.name?.message}>
+        <Form.Row label="Full Name" error={errors?.name?.message}>
           <Input
             type="text"
             id="name"
@@ -89,9 +88,9 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
               onChange: () => trigger('name'),
             })}
           />
-        </FormRow>
+        </Form.Row>
 
-        <FormRow label="Phone" error={errors?.phone?.message}>
+        <Form.Row label="Phone" error={errors?.phone?.message}>
           <Input
             type="text"
             id="phone"
@@ -104,7 +103,7 @@ const UserForm = ({ onCloseModal, user }: IUserFormProp) => {
               onChange: () => trigger('phone'),
             })}
           />
-        </FormRow>
+        </Form.Row>
 
         <Form.Action>
           <FormBtn