From 89e768e42938a9390a8634da3fe35a8073f0a013 Mon Sep 17 00:00:00 2001
From: Thea Nguyen <thea25060@gmail.com>
Date: Sat, 18 May 2024 23:39:32 -0600
Subject: [PATCH] Created MemberTable.tsx + MemberTableTestRoute.tsx

---
 src/App.tsx                            | 190 +++++++++++++------------
 src/components/MemberTable.tsx         | 133 +++++++++++++++++
 src/components/ProfilePictures.tsx     |  55 +++----
 src/routes/MemberTableTestRoute.tsx    |  42 ++++++
 src/routes/ProfilePictureTestRoute.tsx |  60 +++-----
 5 files changed, 321 insertions(+), 159 deletions(-)
 create mode 100644 src/components/MemberTable.tsx
 create mode 100644 src/routes/MemberTableTestRoute.tsx

diff --git a/src/App.tsx b/src/App.tsx
index bcaf8ed..44a50c9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,120 +1,126 @@
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+//#region imports
 // routes
-
+import ModalTestRoute from "@/routes/ModalTestRoute";
 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 { MemberTableTestRoute } from "./routes/MemberTableTestRoute";
 
+// components
 import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
 import InputFieldTestRoute from "./routes/InputFieldTestRoute";
 import MemberHeaderTestRoute from "@/routes/MemberHeaderTestRoute";
 import { MemberInformation } from "./components/MemberInformation";
-import ModalTestRoute from "@/routes/ModalTestRoute";
 import { LoginModal } from "./components/LoginModal";
+import { MemberTable } from "./components/MemberTable";
+//#endregion
 
 const router = createBrowserRouter([
-  {
-    path: "/test",
-    element: <Test />,
-  },
-  {
-    path: "/SearchBarTestRoute",
-    element: <SearchBarTest />,
-  },
-  {
-    path: "/testButton",
-    element: <ButtonTestRoute />,
-  },
-  {
-    path: "/SortDropdownListTestRoute",
-    element: <SortDropdownListTestRoute />,
-  },
-  {
-    path: "/nav-test",
-    element: <NavigationTest />,
-  },
-  {
-    path: "/tooltip",
-    element: <TooltipTestRoute />,
-  },
-  {
-    path: "/input-code-test",
-    element: <InputCodeTest />,
-  },
-  {
-    path: "/upload-file-test",
-    element: <MediaUploadZoneTestRoute />,
-  },
-  {
-    path: "/toast-test",
-    element: <ToastTestRoute />,
-  },
-  {
-    path: "/icon-select",
-    element: <IconOptionTest />,
-  },
-  {
-    path: "/ProfilePic",
-    element: <ProfilePictureTest />,
-  },
-  {
-    path: "/color-picker-test",
-    element: <ColorPickerTestRoute />,
-  },
-  {
-    path: "/member-header-test",
-    element: <MemberHeaderTestRoute />,
-  },
-  {
-    path: "/profile-test",
-    element: <ProfilePictureTest />,
-  },
-  {
-    path: "/member-information-test",
-    element: (
-      <div className="flex flex-col gap-y-20 items-center justify-center w-full h-[100vh] bg-slate-400">
-        <MemberInformation />
-      </div>
-    ),
-  },
-  {
-    path: "/input-field-test",
-    element: <InputFieldTestRoute />,
-  },
-  {
-    path: "/modal-test",
-    element: <ModalTestRoute />,
-  },
-  {
-    path: "/login-modal-test",
-    element: (
-      <div className="flex flex-col gap-y-8 justify-center items-center py-20 bg-slate-100">
-        <LoginModal
-          title="Admin Panel"
-          type="admin"
-        />
-        <LoginModal
-          title="Caregiver Panel"
-          type="member"
-        />
-      </div>
-    ),
-  },
+	{
+		path: "/test",
+		element: <Test />,
+	},
+	{
+		path: "/SearchBarTestRoute",
+		element: <SearchBarTest />,
+	},
+	{
+		path: "/testButton",
+		element: <ButtonTestRoute />,
+	},
+	{
+		path: "/SortDropdownListTestRoute",
+		element: <SortDropdownListTestRoute />,
+	},
+	{
+		path: "/nav-test",
+		element: <NavigationTest />,
+	},
+	{
+		path: "/tooltip",
+		element: <TooltipTestRoute />,
+	},
+	{
+		path: "/input-code-test",
+		element: <InputCodeTest />,
+	},
+	{
+		path: "/upload-file-test",
+		element: <MediaUploadZoneTestRoute />,
+	},
+	{
+		path: "/toast-test",
+		element: <ToastTestRoute />,
+	},
+	{
+		path: "/icon-select",
+		element: <IconOptionTest />,
+	},
+	{
+		path: "/ProfilePic",
+		element: <ProfilePictureTest />,
+	},
+	{
+		path: "/color-picker-test",
+		element: <ColorPickerTestRoute />,
+	},
+	{
+		path: "/member-header-test",
+		element: <MemberHeaderTestRoute />,
+	},
+	{
+		path: "/profile-test",
+		element: <ProfilePictureTest />,
+	},
+	{
+		path: "/member-information-test",
+		element: (
+			<div className="flex flex-col gap-y-20 items-center justify-center w-full h-[100vh] bg-slate-400">
+				<MemberInformation />
+			</div>
+		),
+	},
+	{
+		path: "/input-field-test",
+		element: <InputFieldTestRoute />,
+	},
+	{
+		path: "/modal-test",
+		element: <ModalTestRoute />,
+	},
+	{
+		path: "/login-modal-test",
+		element: (
+			<div className="flex flex-col gap-y-8 justify-center items-center py-20 bg-slate-100">
+				<LoginModal
+					title="Admin Panel"
+					type="admin"
+				/>
+				<LoginModal
+					title="Caregiver Panel"
+					type="member"
+				/>
+			</div>
+		),
+	},
+	{
+		path: "/member-table",
+		element: <MemberTableTestRoute />,
+	},
 ]);
 
 function App() {
-  return <RouterProvider router={router}></RouterProvider>;
+	return <RouterProvider router={router}></RouterProvider>;
 }
 
 export default App;
diff --git a/src/components/MemberTable.tsx b/src/components/MemberTable.tsx
new file mode 100644
index 0000000..763f782
--- /dev/null
+++ b/src/components/MemberTable.tsx
@@ -0,0 +1,133 @@
+//#region imports
+import { UserCircle, Folder, ArrowsClockwise } from "@phosphor-icons/react";
+import ProfilePictures from "./ProfilePictures";
+import * as Icon from "@phosphor-icons/react";
+//#endregion
+
+//#region interfaces
+interface MemberTableProps {
+	data: {
+		profilePicture: {
+			type: "img" | "icon" | string;
+			src: string;
+			backgroundColor?: string;
+		};
+		name: string;
+		storageUsed: string;
+		lastUpdated: string;
+	}[];
+}
+//#endregion
+
+//#region helpers
+function selectIcon(type: string) {
+	const iconStyling =
+		"w-full h-full rounded-full p-2 object-cover text-white";
+	switch (type) {
+		case "PawPrint":
+			return <Icon.PawPrint className={iconStyling} />;
+		case "Tree":
+			return <Icon.Tree className={iconStyling} />;
+		case "Pizza":
+			return <Icon.Pizza className={iconStyling} />;
+		case "Camera":
+			return <Icon.Camera className={iconStyling} />;
+		case "Atom":
+			return <Icon.Atom className={iconStyling} />;
+		case "Binoculars":
+			return <Icon.Binoculars className={iconStyling} />;
+		case "SoccerBall":
+			return <Icon.SoccerBall className={iconStyling} />;
+		case "Coffee":
+			return <Icon.Coffee className={iconStyling} />;
+	}
+}
+//#endregion
+
+/**
+ * Represents a table component that displays member data.
+ * @param data - An array of objects representing each member's data.
+ */
+export function MemberTable({ data }: MemberTableProps) {
+	const headers = [
+		{ icon: <UserCircle />, label: "Name" },
+		{ icon: <Folder />, label: "Storage Used" },
+		{ icon: <ArrowsClockwise />, label: "Last Updated" },
+	];
+
+	function handleClick(row: any) {
+		alert(`Clicked ${row.name}`);
+	}
+
+	return (
+		<div className="rounded-lg w-full overflow-hidden">
+			<table className="w-full">
+				{/* Headers */}
+				<thead className="bg-primary-light text-white">
+					<tr>
+						{headers.map((header, index) => (
+							<th
+								scope="col"
+								key={index}
+								className="px-4 py-4 md:py-7"
+							>
+								<div className="flex items-center font-normal gap-x-2">
+									<span className=" text-xl">
+										{header.icon}
+									</span>
+									<span className="font-display text-sm md:text-base">
+										{header.label}
+									</span>
+								</div>
+							</th>
+						))}
+					</tr>
+				</thead>
+
+				{/* Data */}
+				<tbody>
+					{data.map((row, index) => (
+						<tr
+							key={index}
+							className="cursor-pointer hover:bg-status-blue-light"
+							onClick={() => handleClick(row)}
+						>
+							<td className="px-4 py-6">
+								<div className="flex items-center gap-x-6">
+									<ProfilePictures
+										className="w-12 md:w-16 aspect-square"
+										backgroundColor={
+											row.profilePicture.backgroundColor
+										}
+									>
+										{row.profilePicture.type === "img" ? (
+											<img
+												src={row.profilePicture.src}
+												alt="profile"
+												className="w-full h-full rounded-full object-cover"
+											/>
+										) : (
+											selectIcon(
+												row.profilePicture
+													.src as string,
+											)
+										)}
+									</ProfilePictures>
+									<span className="font-display text-sm md:text-base">
+										{row.name}
+									</span>
+								</div>
+							</td>
+							<td className="px-4 py-6 font-display text-sm md:text-base">
+								{row.storageUsed}
+							</td>
+							<td className="px-4 py-6 font-display text-sm md:text-base">
+								{row.lastUpdated}
+							</td>
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}
diff --git a/src/components/ProfilePictures.tsx b/src/components/ProfilePictures.tsx
index 6c7a44a..09db4d8 100644
--- a/src/components/ProfilePictures.tsx
+++ b/src/components/ProfilePictures.tsx
@@ -1,32 +1,37 @@
-import * as Icon from "@phosphor-icons/react";
-import { ReactNode } from "react";
 import { twMerge } from "tailwind-merge";
 
-interface Props {
-  children: ReactNode;
-  backgroundColor:
-    | "tulip"
-    | "gold"
-    | "lime"
-    | "jade"
-    | "water"
-    | "air"
-    | "lilac"
-    | "candy";
+//#region interfaces
+interface ProfilePicturesProps {
+	children: React.ReactNode;
+	className?: string;
+	backgroundColor?:
+		| "tulip"
+		| "gold"
+		| "lime"
+		| "jade"
+		| "water"
+		| "air"
+		| "lilac"
+		| "candy"
+		| string;
 }
+//#endregion
 
-const ProfilePictures = (props: Props) => {
-  const backgroundColor = `bg-profile-${props.backgroundColor}`;
-  const className = twMerge(
-    backgroundColor,
-    "object-cover object-center flex overflow-hidden justify-center items-center rounded-full w-full h-full"
-  );
-
-  return (
-    <div className="w-full h-full">
-      <div className={className}>{props.children}</div>
-    </div>
-  );
+const ProfilePictures = ({
+	backgroundColor,
+	className,
+	children,
+}: ProfilePicturesProps) => {
+	return (
+		<div
+			className={twMerge(
+				`object-cover rounded-full w-full h-full bg-profile-${backgroundColor}`,
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
 };
 
 export default ProfilePictures;
diff --git a/src/routes/MemberTableTestRoute.tsx b/src/routes/MemberTableTestRoute.tsx
new file mode 100644
index 0000000..e18f6c9
--- /dev/null
+++ b/src/routes/MemberTableTestRoute.tsx
@@ -0,0 +1,42 @@
+import { MemberTable } from "@/components/MemberTable";
+import profilePic from "@/assets/images/face2.jpg";
+import * as Icon from "@phosphor-icons/react";
+
+export function MemberTableTestRoute() {
+	const data = [
+		{
+			profilePicture: {
+				type: "img",
+				src: profilePic,
+			},
+			name: "John Doe",
+			storageUsed: "1.5GB",
+			lastUpdated: "12/20/2024",
+		},
+		{
+			profilePicture: {
+				type: "icon",
+				src: "Tree",
+				backgroundColor: "lime",
+			},
+			name: "Jane Doe",
+			storageUsed: "2.5GB",
+			lastUpdated: "12/11/2024",
+		},
+		{
+			profilePicture: {
+				type: "icon",
+				src: "PawPrint",
+				backgroundColor: "water",
+			},
+			name: "John Smith",
+			storageUsed: "3.5GB",
+			lastUpdated: "11/11/2024",
+		},
+	];
+	return (
+		<div className="w-full h-full">
+			<MemberTable data={data} />
+		</div>
+	);
+}
diff --git a/src/routes/ProfilePictureTestRoute.tsx b/src/routes/ProfilePictureTestRoute.tsx
index 2a1a9c7..ce0e22f 100644
--- a/src/routes/ProfilePictureTestRoute.tsx
+++ b/src/routes/ProfilePictureTestRoute.tsx
@@ -1,52 +1,28 @@
 import ProfilePictures from "@/components/ProfilePictures";
 import profilePic from "@/assets/images/face2.jpg";
-import profilePic1 from "@/assets/images/face1.jpeg";
-import profilePic2 from "@/assets/images/face.jpeg";
 
 import * as Icon from "@phosphor-icons/react";
 
 function ProfilePictureTest() {
-  return (
-    <div className="space-y-4 p-4">
-      <div className="w-12 h-12">
-        <ProfilePictures backgroundColor="tulip">
-          <img
-            className="w-full h-full object-cover rounded-full"
-            src={profilePic}
-            alt="Profile pic"
-          />
-        </ProfilePictures>
-      </div>
+	return (
+		<div className="space-y-4 p-4">
+			<div className="w-20 h-20">
+				<ProfilePictures backgroundColor="tulip">
+					<img
+						src={profilePic}
+						alt="profile"
+						className="w-12 h-12 rounded-full object-cover"
+					/>
+				</ProfilePictures>
+			</div>
 
-      <div className="w-20 h-20">
-        <ProfilePictures backgroundColor="tulip">
-          <img
-            className="w-full h-full object-cover rounded-full"
-            src={profilePic1}
-            alt="Profile pic"
-          />
-        </ProfilePictures>
-      </div>
-      <div className="w-24 h-24">
-        <ProfilePictures backgroundColor="tulip">
-          <img
-            className="w-full h-full object-cover rounded-full"
-            src={profilePic2}
-            alt="Profile pic"
-          />
-        </ProfilePictures>
-      </div>
-      <div className="w-12 h-12">
-        <ProfilePictures backgroundColor="tulip">
-          <Icon.PawPrint
-            className="w-full h-full object-cover rounded-full"
-            size={100}
-            color={"white"}
-          />
-        </ProfilePictures>
-      </div>
-    </div>
-  );
+			<div className="w-12 h-12">
+				<ProfilePictures backgroundColor="tulip">
+					<Icon.PawPrint className="w-full h-full rounded-full p-2 object-cover" />
+				</ProfilePictures>
+			</div>
+		</div>
+	);
 }
 
 export default ProfilePictureTest;