Merge pull request #32 from UofA-Blueprint/ASC-83

ASC-83: Media Grid

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",

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;

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>
 	);
 }

src/types/Media.tsx

@@ -0,0 +1,6 @@
+interface Media {
+	src: string;
+	caption?: string | null;
+	date: Date;
+	id: number;
+}