Format and optimized code

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

@@ -3,7 +3,7 @@ import { useContext, useState } from 'react';
 // Components
 import { HiEllipsisVertical } from 'react-icons/hi2';
 import { useOutsideClick } from '../../hooks/useOutsideClick';
-import { StyledButton, StyledList, StyledMenu, StyledToggle } from './styled';
+import { StyledMenu, StyledButton, StyledList, StyledToggle } from './styled';
 
 // Interfaces
 import { IButton } from '../../globals/interfaces';
@@ -30,11 +30,14 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => {
   const handleClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
 
-    openId === '' || openId !== id ? open!(id) : close!();
+    // prettier-ignore
+    openId === '' || openId !== id 
+      ? open!(id) 
+      : close!();
   };
 
   return (
-    <StyledToggle onClick={(e) => handleClick(e)}>
+    <StyledToggle onClick={handleClick}>
       <HiEllipsisVertical />
     </StyledToggle>
   );

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

@@ -1,13 +1,13 @@
 import styled from 'styled-components';
 
-export const StyledMenu = styled.div`
+const StyledMenu = styled.div`
   position: relative;
   display: flex;
   align-items: center;
   justify-content: flex-end;
 `;
 
-export const StyledButton = styled.button`
+const StyledButton = styled.button`
   width: 100%;
   text-align: left;
   background: none;
@@ -32,7 +32,7 @@ export const StyledButton = styled.button`
   }
 `;
 
-export const StyledToggle = styled.button`
+const StyledToggle = styled.button`
   background: none;
   border: none;
   padding: 8px;
@@ -50,7 +50,7 @@ export const StyledToggle = styled.button`
   }
 `;
 
-export const StyledList = styled.ul`
+const StyledList = styled.ul`
   position: absolute;
   z-index: 1000;
 
@@ -61,3 +61,5 @@ export const StyledList = styled.ul`
   right: -10px;
   top: 40px;
 `;
+
+export { StyledMenu, StyledButton, StyledList, StyledToggle };

hotel-management/src/components/Message.tsx

@@ -6,8 +6,8 @@ const StyledMessage = styled.p`
   padding: 20px;
 `;
 
-const Empty = ({ children }: { children: string }) => {
+const Message = ({ children }: { children: string }) => {
   return <StyledMessage>{children}</StyledMessage>;
 };
 
-export default Empty;
+export default Message;

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

@@ -25,8 +25,9 @@ const Header = ({ children }: ITable) => {
 };
 
 const Body = <T,>({ data, render }: ITableBody<T>) => {
-  if (data && data.length > 0)
-    return <StyledBody>{data?.map(render as CallbackMapFunc<T>)}</StyledBody>;
+  data!.length > 0 && (
+    <StyledBody>{data?.map(render as CallbackMapFunc<T>)}</StyledBody>
+  );
 };
 
 const Row = ({ children }: ITable) => {