Merge pull request #25 from UofA-Blueprint/ASC-80

ASC- 80: Components - Gallery
UofA-Blueprint · Jun 7, 2024 · 7679de9 · 7679de9
2 parents edbfda6 + 0987ec4
commit 7679de9
Show file tree

Hide file tree

Showing 9 changed files with 439 additions and 314 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -19,6 +19,7 @@ import ColorPickerTestRoute from "@/routes/ColorPickerTestRoute";
 import InputFieldTestRoute from "./routes/InputFieldTestRoute";
 import MemberHeaderTestRoute from "@/routes/MemberHeaderTestRoute";
 import MediaUploadStatusTestRoute from "./routes/MediaUploadStatusTestRoute";
+import GalleryTestRoute from "./routes/GalleryTestRoute";
 
 // components
 import { MemberInformation } from "./components/MemberInformation";
@@ -27,81 +28,79 @@ import { LoginModal } from "./components/LoginModal";
 //#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: "/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">
@@ -120,10 +119,14 @@ const router = createBrowserRouter([
 		path: "/member-table",
 		element: <MemberTableTestRoute />,
 	},
-  {
-    path: "/MediaUploadStatusTest",
-    element: <MediaUploadStatusTestRoute />,
-  },
+	{
+		path: "/MediaUploadStatusTest",
+		element: <MediaUploadStatusTestRoute />,
+	},
+	{
+		path: "/gallery-test",
+		element: <GalleryTestRoute />,
+	},
 ]);
 
 function App() {

diff --git a/src/assets/images/pic1.jpg b/src/assets/images/pic1.jpg
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
@@ -0,0 +1,66 @@
+//#region Imports
+import { CaretLeft } from "@phosphor-icons/react";
+import MediaUploadZone from "./MediaUploadZone";
+import picture from "@/assets/images/pic1.jpg";
+//#endregion
+
+function Gallery() {
+	//TODO: Configure the local gallery to display images here
+	const imgList: string[] = [picture, picture, picture, picture, picture];
+
+	//#region Functions
+
+	/**
+	 * Close the gallery
+	 */
+	const handleClose = () => {};
+
+	/**
+	 * Handle an image in the gallery being clicked
+	 */
+	const handleImageClicked = () => {};
+
+	//#endregion
+
+	return (
+		<div className="flex flex-col items-center justify-center gap-y-6 max-w-5xl px-6 rounded-xl py-8 bg-white">
+			{/* Title */}
+			<div className="w-full">
+				<div className="flex gap-x-2 items-center font-display text-2xl font-bold">
+					<CaretLeft
+						className="cursor-pointer hover:text-primary-main transition ease-in-out"
+						weight="bold"
+						onClick={handleClose}
+					/>
+					<h1 className="">Gallery</h1>
+				</div>
+			</div>
+
+			{/* Image gallery */}
+			<div className=" grid h-96 w-full grid-cols-2 md:grid-cols-4 gap-6 items-center overflow-y-auto scroller">
+				{imgList.map((img, index) => (
+					<img
+						key={index}
+						src={img}
+						alt="gallery"
+						className="w-56 aspect-square rounded-xl cursor-pointer hover:scale-95 transition ease-in-out duration-200"
+						onClick={handleImageClicked}
+					/>
+				))}
+			</div>
+
+			{/* Or */}
+			<div className="flex w-full items-center gap-x-4">
+				<div className="bg-primary-main w-full h-1.5 rounded-lg"></div>
+				<p>or</p>
+				<div className="bg-primary-main w-full h-1.5 rounded-lg"></div>
+			</div>
+
+			{/* Upload media */}
+			<h2 className="w-full text-xl">Upload Media</h2>
+			<MediaUploadZone />
+		</div>
+	);
+}
+
+export { Gallery };