Merged main

src/App.tsx

@@ -1,30 +1,34 @@
+//#region import
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
 // routes
-
 import ButtonTestRoute from "@/routes/ButtonTestRoute";
 import ProfilePictureTest from "./routes/ProfilePictureTestRoute";
 import Test from "./routes/Test";
 import SearchBarTest from "./routes/SearchBarTestRoute";
-import DropdownItem from "@/components/DropdownItem";
 import SortDropdownListTestRoute from "@/routes/SortDropdownListTestRoute";
 import NavigationTest from "@/routes/NavigationTest";
 import TooltipTestRoute from "./routes/TooltipTestRoute";
 import InputCodeTest from "@/routes/InputCodeTest";
 import ToastTestRoute from "@/routes/ToastTestRoute";
 import MediaUploadZoneTestRoute from "@/routes/MediaUploadZoneTestRoute";
-
 import IconOptionTest from "./routes/IconOptionTest";
 import ImageTestRoute from "./routes/ImageTestRoute";
-
+import { MemberTableTestRoute } from "./routes/MemberTableTestRoute";
 import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
 import InputFieldTestRoute from "./routes/InputFieldTestRoute";
 import MemberHeaderTestRoute from "@/routes/MemberHeaderTestRoute";
-import { MemberInformation } from "./components/MemberInformation";
+import MediaUploadStatusTestRoute from "./routes/MediaUploadStatusTestRoute";
 import ModalTestRoute from "@/routes/ModalTestRoute";
+
+// components
+import { MemberInformation } from "./components/MemberInformation";
 import { LoginModal } from "./components/LoginModal";
 
+//#endregion
+
 const router = createBrowserRouter([
+
   {
     path: "/test",
     element: <Test />,
@@ -70,6 +74,7 @@ const router = createBrowserRouter([
     element: <ProfilePictureTest />,
   },
   {
+
     path: "/color-picker-test",
     element: <ColorPickerTestRoute />,
   },
@@ -115,6 +120,14 @@ const router = createBrowserRouter([
         />
       </div>
     ),
+	},
+	{
+		path: "/member-table",
+		element: <MemberTableTestRoute />,
+	},
+  {
+    path: "/MediaUploadStatusTest",
+    element: <MediaUploadStatusTestRoute />,
   },
 ]);
 

src/components/MediaUploadStatus.tsx

@@ -0,0 +1,126 @@
+import React, { useEffect, useState } from "react";
+import { File, X, Check, Trash } from "@phosphor-icons/react";
+
+// Props definition for MediaUploadStatus
+interface MediaUploadStatusProps {
+  fileName: string;
+  fileSize: number;
+}
+
+// Format bytes into its corresponding format
+const formatBytes = (bytes: number, decimals = 2): string => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1000; // Decimal multiple
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+};
+
+// Main function
+const MediaUploadStatus: React.FC<MediaUploadStatusProps> = ({ fileName, fileSize }) => {
+  const [uploadProgress, setUploadProgress] = useState(70); // Example progress in percentage
+  const [isFailed, setIsFailed] = useState(false); // Example failed condition
+  const [isCompleted, setIsCompleted] = useState(false);
+  const [showDoneStatus, setShowDoneStatus] = useState(false);
+
+  // For the trash icon to appear when it complete
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout>;
+    if (isCompleted) {
+      timer = setTimeout(() => {
+        setShowDoneStatus(true);
+      }, 2500); // 2.5 sec
+    } else {
+      setShowDoneStatus(false);
+    }
+    return () => clearTimeout(timer); // Clean up the timer when isCompleted changes
+  }, [isCompleted]);
+
+  // Condition to check if file is uploaded successfully
+  useEffect(() => {
+    if (uploadProgress === 100) {
+      setIsCompleted(true);
+    } else {
+      setIsCompleted(false);
+    }
+  }, [uploadProgress]);
+
+  // useState for isFailed will implement here!
+
+
+
+  // useState for setUploadProgress will implement here!
+    // This function expect to return the correct uploading percentage for the file
+
+
+  return (
+    <div className= {`flex items-center rounded py-2 px-4 gap-2 h-full text-neutrals-dark-500 ${isFailed ? "bg-status-red-light" : "bg-neutrals-light-300"}`}>
+        {/* File Icon */}
+        <div>
+          <File size={24} />
+        </div>
+
+        {/* Middle Content: Filename, Progress Bar, Info Text */}
+        <div className="flex-1">
+          {/*Filename*/}
+          <div className="flex flex-col">
+            <div className="text-sm">
+              {fileName}
+            </div>
+
+            {showDoneStatus ? null : 
+              (
+                <div className="relative mt-1">
+                  {/* Progress bar */}
+                  {isFailed ? null : (
+                      <div className="w-full bg-neutrals-dark-100 h-1 rounded-full">
+                        <div className="bg-primary-main h-1 rounded-full" style={{ width: `${uploadProgress}%`}}></div>
+                      </div>
+                    )
+                  }
+
+                  {/* Uploading info text */}
+                  {isFailed ? (
+                      <div className="flex justify-between text-[0.625rem] leading-[0.919rem] text-status-red-main font-normal">
+                        <div>Failed to upload</div>
+                      </div>
+                    ) :
+                    (isCompleted ? (
+                        <div className="flex justify-between text-[0.625rem] leading-[0.919rem] text-neutrals-dark-200 font-normal mt-1.5">
+                          <div>Complete</div>
+                          <div className=" text-status-green-main">
+                            <Check size={16} />
+                          </div>
+                        </div>
+                      ) : 
+                      (
+                      <div className="flex justify-between text-[0.625rem] leading-[0.919rem] text-neutrals-dark-200 font-normal mt-1.5">
+                        <div>{formatBytes((fileSize * uploadProgress) / 100)} of {formatBytes(fileSize)}</div>
+                        <div>Uploading... {uploadProgress}%</div>
+                      </div>
+                      )
+                    )
+                  }
+                </div>
+              )
+            } 
+          </div>
+        </div>
+
+        {/* X Button */}
+        {isCompleted ? (
+          showDoneStatus ? (
+            <button className=" pl-2 text-neutrals-dark-200 hover:text-neutrals-dark-500 transition ease-in-out duration-300">
+              <Trash size={24} />
+            </button>) : null
+          ) : (
+          <button className=" pl-2 text-neutrals-dark-200 hover:text-neutrals-dark-500">
+            <X size={24} />
+          </button>
+        )}
+    </div>
+  );
+};
+
+export default MediaUploadStatus;

src/routes/MediaUploadStatusTestRoute.tsx

@@ -0,0 +1,21 @@
+import MediaUploadStatus from "@/components/MediaUploadStatus";
+
+
+// TODO: Add the +20% button here to test it and the fail to upload button
+// 
+function MediaUploadStatusTestRoute() {
+    return (
+    <div className="text-h2 flex flex-col items-center justify-center min-h-screen bg-primary-light">
+        <div>
+            <h1>Is this what you looking for? </h1>
+            {/* fileSize is in bytes */}
+            {/* Play around with uploadProgress in percentage and isFailed variables in MediaUploadStatus.tsx */}
+            <MediaUploadStatus fileName="Testing.png" fileSize={1000000000}/>
+        </div>
+    </div>
+
+    )
+}
+export default MediaUploadStatusTestRoute;
+
+

src/routes/ModalTestRoute.tsx

@@ -26,23 +26,7 @@ function ModalTestRoute() {
         icon={<Truck size={24} />}
         content={
           <div className="flex flex-col gap-6">
-            <InputField
-              type="text"
-              error={false}
-              label="Name"
-              required={false}
-            />
-            <InputField
-              type="text"
-              error={false}
-              required={false}
-            />
-            <InputField
-              type="text"
-              error={false}
-              label="Phone"
-              required={false}
-            />
+
           </div>
         }
         actions={