Format code style

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

@@ -1,92 +1,5 @@
-import { COLOR, SIZE } from '@constant/styles';
 import { ReactNode } from 'react';
-import styled, { css } from 'styled-components';
+import { StyledButtonIcon } from './styled';
-
-interface IStyledButtonIcon {
-  isHaveChildren: boolean;
-  style?: {
-    fontSize?: string;
-    backgroundColor?: string;
-    color?: string;
-  };
-  iconStyle?: {
-    color?: string;
-    size?: string;
-  };
-}
-
-const StyledButtonIcon = styled.button<IStyledButtonIcon>`
-  background: none;
-
-  padding: 10px;
-  transition: all 0.2s;
-
-  border: none;
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.style?.fontSize &&
-    css`
-      font-size: ${props.style.fontSize};
-    `}
-
-  ${(props) =>
-    props.color &&
-    css`
-      font-size: ${props.color};
-    `}
-
-  ${(props) =>
-    props.isHaveChildren
-      ? css`
-          display: flex;
-          align-items: center;
-          gap: 10px;
-
-          text-align: left;
-          width: 100%;
-        `
-      : css`
-          border-radius: var(--radius-md);
-        `}
-
-  &:hover {
-    background-color: var(--hover-background-color);
-  }
-
-  & svg {
-    ${(props) =>
-      props.iconStyle?.size &&
-      css`
-        width: ${props.iconStyle.size};
-        height: ${props.iconStyle.size};
-      `}
-
-    ${(props) =>
-      props.iconStyle?.color &&
-      css`
-        color: ${props.iconStyle.color};
-      `}
-    transition: all 0.3s;
-  }
-`;
-
-StyledButtonIcon.defaultProps = {
-  style: {
-    fontSize: SIZE.DEFAULT,
-    backgroundColor: COLOR.DEFAULT,
-    color: COLOR.BLACK,
-  },
-  iconStyle: {
-    color: COLOR.BLACK,
-    size: SIZE.DEFAULT,
-  },
-};
 
 interface IButtonIcon {
   icon: ReactNode;

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

@@ -0,0 +1,90 @@
+import styled, { css } from 'styled-components';
+import { COLOR, SIZE } from '@constant/styles';
+
+interface IStyledButtonIcon {
+  isHaveChildren: boolean;
+  style?: {
+    fontSize?: string;
+    backgroundColor?: string;
+    color?: string;
+  };
+  iconStyle?: {
+    color?: string;
+    size?: string;
+  };
+}
+
+const StyledButtonIcon = styled.button<IStyledButtonIcon>`
+  background: none;
+
+  padding: 10px;
+  transition: all 0.2s;
+
+  border: none;
+
+  ${(props) =>
+    props.style?.fontSize &&
+    css`
+      font-size: ${props.style.fontSize};
+    `}
+
+  ${(props) =>
+    props.style?.fontSize &&
+    css`
+      font-size: ${props.style.fontSize};
+    `}
+
+  ${(props) =>
+    props.color &&
+    css`
+      font-size: ${props.color};
+    `}
+
+  ${(props) =>
+    props.isHaveChildren
+      ? css`
+          display: flex;
+          align-items: center;
+          gap: 10px;
+
+          text-align: left;
+          width: 100%;
+        `
+      : css`
+          border-radius: var(--radius-md);
+        `}
+
+  &:hover {
+    background-color: var(--hover-background-color);
+  }
+
+  & svg {
+    ${(props) =>
+      props.iconStyle?.size &&
+      css`
+        width: ${props.iconStyle.size};
+        height: ${props.iconStyle.size};
+      `}
+
+    ${(props) =>
+      props.iconStyle?.color &&
+      css`
+        color: ${props.iconStyle.color};
+      `}
+    transition: all 0.3s;
+  }
+`;
+
+StyledButtonIcon.defaultProps = {
+  style: {
+    fontSize: SIZE.DEFAULT,
+    backgroundColor: COLOR.DEFAULT,
+    color: COLOR.BLACK,
+  },
+  iconStyle: {
+    color: COLOR.BLACK,
+    size: SIZE.DEFAULT,
+  },
+};
+
+export { StyledButtonIcon };

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

@@ -5,6 +5,7 @@ import { HiEllipsisVertical } from 'react-icons/hi2';
 
 // Hooks
 import { useOutsideClick } from '@hook/useOutsideClick';
+import ButtonIcon from '@component/ButtonIcon';
 
 // Styled
 import { StyledMenu, StyledList, StyledToggle } from './styled';
@@ -14,7 +15,8 @@ import MenusContext from '@context/MenuContext';
 
 // Types
 import { Nullable } from '@type/common';
-import ButtonIcon from '@component/ButtonIcon';
+
+// Constants
 import { COLOR } from '@constant/styles';
 
 interface IButton {

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

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 // Styled
 import { StyledSearch } from './styled';
 
 // Hooks
 import { useDebounce } from '@hook/useDebounce';
-import { useSearchParams } from 'react-router-dom';
+
+// Types
 import { Nullable } from '@type/common';
 
 interface ISearch {

hotel-management/src/contexts/UserRoomAvailableContext.ts

@@ -1,6 +1,8 @@
-import { IDataState } from '@type/common';
 import { Dispatch, createContext } from 'react';
 
+// Types
+import { IDataState } from '@type/common';
+
 interface IUserRoomState {
   usersAvailable: IDataState[];
   roomsAvailable: IDataState[];

hotel-management/src/services/supabaseService.ts

@@ -1,4 +1,6 @@
 import { createClient } from '@supabase/supabase-js';
+
+// Types
 import { Database } from '@type/supabase';
 
 // Constants