From a8762149d53cf6ac01a89344ad9a51b3a8204b43 Mon Sep 17 00:00:00 2001
From: Duc Ho <hotienduc05012002@gmail.com>
Date: Thu, 3 Oct 2024 22:32:00 -0600
Subject: [PATCH] Added masonic and finished Media Grid

---
 package.json                           |   1 +
 src/components/MediaGrid.tsx           |  28 +++++
 src/routes/test/MediaCardTestRoute.tsx | 143 +++++++++++++++----------
 src/types/Media.tsx                    |   6 ++
 4 files changed, 123 insertions(+), 55 deletions(-)
 create mode 100644 src/components/MediaGrid.tsx
 create mode 100644 src/types/Media.tsx

diff --git a/package.json b/package.json
index fe341a8..8ce20db 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@phosphor-icons/react": "^2.0.15",
     "clsx": "^2.1.0",
     "firebase": "^10.12.2",
+    "masonic": "^4.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.9.0",
diff --git a/src/components/MediaGrid.tsx b/src/components/MediaGrid.tsx
new file mode 100644
index 0000000..f78ca16
--- /dev/null
+++ b/src/components/MediaGrid.tsx
@@ -0,0 +1,28 @@
+import { Masonry } from "masonic";
+import MediaCard from "./MediaCard";
+
+interface MediaGridProps {
+	data: Media[];
+}
+
+function MediaGrid({ data }: MediaGridProps) {
+	return (
+		<Masonry
+			items={data}
+			render={MasonryItem}
+			columnGutter={12}
+			columnWidth={320}
+			overscanBy={5}
+		/>
+	);
+}
+
+interface MasonryItemProps {
+	data: Media;
+}
+
+function MasonryItem({ data }: MasonryItemProps) {
+	return <MediaCard {...data} />;
+}
+
+export default MediaGrid;
diff --git a/src/routes/test/MediaCardTestRoute.tsx b/src/routes/test/MediaCardTestRoute.tsx
index 249231c..cae6b16 100644
--- a/src/routes/test/MediaCardTestRoute.tsx
+++ b/src/routes/test/MediaCardTestRoute.tsx
@@ -1,23 +1,94 @@
-import MediaCard from "@/components/MediaCard";
+import MediaGrid from "@/components/MediaGrid";
 import { ToastContainer } from "react-toastify";
 
-const getMeta = (
-	url: string,
-	cb: (error: string | Event | null, img?: HTMLImageElement | null) => void,
-) => {
-	const img = new Image();
-	img.onload = () => cb(null, img);
-	img.onerror = (err) => cb(err);
-	img.src = url;
-};
+const data = [
+	{
+		src: "https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1234,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1723984834599-5357b87f727c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1235,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724505599369-2c1d43324fdc",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1236,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1237,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1723984834599-5357b87f727c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1238,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724505599369-2c1d43324fdc",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1239,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1240,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1723984834599-5357b87f727c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1241,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724505599369-2c1d43324fdc",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1242,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1240,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1723984834599-5357b87f727c",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1241,
+		date: new Date("Oct 2, 2024"),
+	},
+	{
+		src: "https://images.unsplash.com/photo-1724505599369-2c1d43324fdc",
+		caption:
+			"Channeling their inner artist with a paintbrush and a splash of color!",
+		id: 1242,
+		date: new Date("Oct 2, 2024"),
+	},
+];
 
 function MediaCardTestRoute() {
-	getMeta(
-		"https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c",
-		(err, img) => {
-			console.log(img?.naturalWidth, img?.naturalHeight);
-		},
-	);
 	return (
 		<div className="bg-blue-200 min-h-screen flex justify-center items-center p-4">
 			<ToastContainer
@@ -27,45 +98,7 @@ function MediaCardTestRoute() {
 				closeButton={false}
 				hideProgressBar={true}
 			/>
-			<div className="grid grid-flow-row grid-cols-4 gap-8 md:gap-12 lg:gap-16">
-				<MediaCard
-					src="https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-					selectable
-				/>
-				<MediaCard
-					src="https://images.unsplash.com/photo-1723984834599-5357b87f727c"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-				/>
-				<MediaCard
-					src="https://images.unsplash.com/photo-1724505599369-2c1d43324fdc"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-				/>
-				<MediaCard
-					src="https://images.unsplash.com/photo-1724579243894-6a8c9bbfe88c"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-				/>
-				<MediaCard
-					src="https://images.unsplash.com/photo-1724505599369-2c1d43324fdc"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-				/>
-				<MediaCard
-					src="https://images.unsplash.com/photo-1723984834599-5357b87f727c"
-					caption="Channeling their inner artist with a paintbrush and a splash of color!"
-					id={1234}
-					date={new Date("Oct 2, 2024")}
-				/>
-			</div>
+			<MediaGrid data={data} />
 		</div>
 	);
 }
diff --git a/src/types/Media.tsx b/src/types/Media.tsx
new file mode 100644
index 0000000..69cbe43
--- /dev/null
+++ b/src/types/Media.tsx
@@ -0,0 +1,6 @@
+interface Media {
+	src: string;
+	caption?: string | null;
+	date: Date;
+	id: number;
+}