feat(template): create choose-file-box and upload-document-box template

src/components/home/ChooseFileBox.tsx

@@ -0,0 +1,33 @@
+import { useMemo, useState } from 'react';
+import { Dialog, DialogBody } from '@material-tailwind/react';
+import { useUploadDocumentBox } from './UploadDocumentBox';
+
+// Loc's task in here.
+// This style is using custom hook. See ../common/SidebarMenu.tsx
+// This hook is used in ./src/pages/HomePage.tsx
+
+export function useChooseFileBox() {
+  const { openUploadDocumentBox, UploadDocumentBox } = useUploadDocumentBox();
+
+  const [openBox, setOpenBox] = useState<boolean>(false);
+
+  const ChooseFileBox = useMemo(
+    () => () => {
+      const handleOpenBox = () => setOpenBox(!openBox);
+      return (
+        <>
+          <Dialog open={openBox} handler={handleOpenBox}>
+            <DialogBody onClick={openUploadDocumentBox}>A</DialogBody>
+          </Dialog>
+          {<UploadDocumentBox />}
+        </>
+      );
+    },
+    [openBox, openUploadDocumentBox, UploadDocumentBox]
+  );
+
+  return {
+    openChooseFileBox: () => setOpenBox(true),
+    ChooseFileBox: ChooseFileBox
+  };
+}

src/components/home/UploadDocumentBox.tsx

@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { Dialog, DialogBody } from '@material-tailwind/react';
+
+export function useUploadDocumentBox() {
+  const [openBox, setOpenBox] = useState<boolean>(false);
+  const handleOpenBox = () => setOpenBox(!openBox);
+
+  const UploadDocumentBox = () => (
+    <Dialog open={openBox} handler={handleOpenBox} size='xxl'>
+      <DialogBody>A</DialogBody>
+    </Dialog>
+  );
+
+  return {
+    openUploadDocumentBox: () => setOpenBox(true),
+    UploadDocumentBox: UploadDocumentBox
+  };
+}

src/components/home/index.ts

@@ -2,5 +2,7 @@
  * @file Automatically generated by barrelsby.
  */
 
+export * from './ChooseFileBox';
 export * from './Orders';
 export * from './Slides';
+export * from './UploadDocumentBox';

src/main.tsx

@@ -8,12 +8,10 @@ import './index.css';
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <BrowserRouter>
-      <ThemeProvider>
-        <ToastContainer limit={1} />
-        <App />
-      </ThemeProvider>
-    </BrowserRouter>
-  </React.StrictMode>
+  <BrowserRouter>
+    <ThemeProvider>
+      <ToastContainer limit={1} />
+      <App />
+    </ThemeProvider>
+  </BrowserRouter>
 );

src/pages/HomePage.tsx

@@ -1,41 +1,50 @@
 import { useEffect } from 'react';
 import { ArrowRightIcon, PrinterIcon } from '@heroicons/react/24/outline';
-import { Orders, Slides } from '@components/home';
+import { Orders, Slides, useChooseFileBox } from '@components/home';
 import { useOrderStore, useSlideStore, useUserInfoStore } from '@states/home';
 
 export function HomePage() {
   const { orderData, getOrderData } = useOrderStore();
   const { slideData, getSlideData } = useSlideStore();
   const { getUserInfoData } = useUserInfoStore();
 
+  const { openChooseFileBox, ChooseFileBox } = useChooseFileBox();
+
   useEffect(() => {
     getOrderData();
     getSlideData();
     getUserInfoData();
   }, [getOrderData, getSlideData, getUserInfoData]);
 
   return (
-    <div className='p-6 lg:py-5 lg:px-56'>
-      <div className='mb-4 lg:mb-6'>
-        <h4 className='font-normal text-blue/1 text-base lg:text-2xl'>
-          Student Smart Printing Service (SSPS)
-        </h4>
-        <h3 className='font-bold text-blue/2 text-xl lg:text-4xl'>Welcome Username!</h3>
-      </div>
-      <div className='mb-4 lg:mb-12'>
-        <Slides slides={slideData} />
-      </div>
-      <div className='flex items-center justify-between bg-blue/1 rounded-lg p-4 mb-16 lg:mb-24 lg:h-[120px] lg:px-6'>
-        <div className='flex items-center gap-4'>
-          <PrinterIcon
-            strokeWidth={2}
-            className='bg-white text-blue-500 rounded-full w-10 h-10 p-2 lg:w-12 lg:h-12 lg:p-3'
-          />
-          <span className='text-white font-bold lg:text-2xl'>Order printing</span>
+    <>
+      <div className='p-6 lg:py-5 lg:px-56'>
+        <div className='mb-4 lg:mb-6'>
+          <h4 className='font-normal text-blue/1 text-base lg:text-2xl'>
+            Student Smart Printing Service (SSPS)
+          </h4>
+          <h3 className='font-bold text-blue/2 text-xl lg:text-4xl'>Welcome Username!</h3>
         </div>
-        <ArrowRightIcon strokeWidth={3} className='text-white w-4 h-4 lg:w-6 lg:h-6' />
+        <div className='mb-4 lg:mb-12'>
+          <Slides slides={slideData} />
+        </div>
+        <div
+          className='flex items-center justify-between bg-blue/1 rounded-lg p-4 mb-16 lg:mb-24 lg:h-[120px] lg:px-6'
+          onClick={openChooseFileBox}
+        >
+          <div className='flex items-center gap-4'>
+            <PrinterIcon
+              strokeWidth={2}
+              className='bg-white text-blue-500 rounded-full w-10 h-10 p-2 lg:w-12 lg:h-12 lg:p-3'
+            />
+            <span className='text-white font-bold lg:text-2xl'>Order printing</span>
+          </div>
+          <ArrowRightIcon strokeWidth={3} className='text-white w-4 h-4 lg:w-6 lg:h-6' />
+        </div>
+        <Orders orders={orderData} />
       </div>
-      <Orders orders={orderData} />
-    </div>
+
+      {<ChooseFileBox />}
+    </>
   );
 }