Merge branch 'feat/update-components-ui' into feat/unit-test-for-components

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 {