fix: upload response

src/app/(admin)/admin/Upload.tsx

@@ -7,6 +7,7 @@ import { ChangeEvent, useState } from "react";
 
 export default function Upload() {
 	const [selectedFile, setSelectedFile] = useState<File | null>(null);
+	const [statusMessage, setStatusMessage] = useState<string | null>(null);
 
 	const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
 		const target = event.target as HTMLInputElement;
@@ -25,9 +26,11 @@ export default function Upload() {
 				if (typeof text !== "string") return;
 				try {
 					const json = JSON.parse(text);
-					uploadData(json); // Call the uploadData function with the parsed JSON
+					await uploadData(json);
+					setStatusMessage("Data uploaded successfully");
 				} catch (error) {
 					console.error("Error parsing JSON:", error);
+					setStatusMessage("Error parsing JSON");
 				}
 			};
 
@@ -41,6 +44,7 @@ export default function Upload() {
 			<Button variant="link" onClick={handleUpload}>
 				Upload Data
 			</Button>
+			{statusMessage && <p>{statusMessage}</p>}
 		</>
 	);
 }

src/app/(index)/DownloadResume.tsx

@@ -1,11 +1,14 @@
 import { ExternalLinkIcon } from "lucide-react";
+import { usePlausible } from "next-plausible";
 import Link from "next/link";
 
 export default function DownloadResume() {
+	const plausible = usePlausible();
+
 	return (
 		<Link
 			href="/resume"
-			//onClick={() => plausible("Resume Download")}
+			onClick={() => plausible("Resume Download")}
 			target="_blank"
 			className="group inline-flex select-none gap-4 hover:underline"
 		>

src/app/(index)/Projects.tsx

@@ -1,11 +1,14 @@
 "use client";
 
 import { useMemo } from "react";
+import { usePlausible } from "next-plausible";
 
 import TagList from "@/components/TagList";
 import ProjectDialog from "@/components/dialogs/ProjectDialog";
 
 export default function Projects({ projects }: { projects: Project[] }) {
+	const plausible = usePlausible();
+
 	const sortedProjects = useMemo(
 		() =>
 			projects.sort((a, b) => {
@@ -30,22 +33,22 @@ export default function Projects({ projects }: { projects: Project[] }) {
 	);
 
 	return (
-		<div className="grid grid-cols-12 gap-4">
+		<div className="grid grid-cols-12 gap-4 md:gap-6">
 			{sortedProjects.map((p, i) => (
 				<ProjectDialog
 					project={p}
 					className="col-span-6 md:col-span-4 lg:col-span-3"
 					key={"projects-" + i}
 				>
 					<div
-						/* onClick={() =>
-								plausible("View Project", {
-									props: {
-										project: p.title,
-										showCase: true,
-									},
-								})
-							} */
+						onClick={() =>
+							plausible("View Project", {
+								props: {
+									project: p.title,
+									showCase: true,
+								},
+							})
+						}
 						className="flex h-full w-full cursor-pointer flex-col gap-2 rounded p-2 text-left text-neutral-500 transition-all hover:scale-105 hover:bg-neutral-200/50 dark:text-neutral-400 hover:dark:bg-neutral-800"
 					>
 						{/* Preview */}

src/app/(index)/ProjectsList.tsx

@@ -11,7 +11,7 @@ export default async function ProjectsList() {
 	return (
 		<section
 			id={ID}
-			className="flex flex-col gap-4 sm:py-16 md:justify-between"
+			className="flex flex-col gap-4 md:gap-8 sm:py-16 md:justify-between"
 		>
 			<SectionTitle id={ID} />
 			<Projects projects={projects} />

src/components/cards/ImageCard.tsx

@@ -1,20 +1,24 @@
+"use client";
+
 import { ChevronLeft, ChevronRight } from "lucide-react";
-import { useState } from "react";
+import { usePlausible } from "next-plausible";
+import { useEffect, useState } from "react";
 
 export default function ImageCard({ project }: { project: Project }) {
+	const plausible = usePlausible();
 	const [idx, setIdx] = useState(0);
 
 	const next = () => setIdx(idx < project.images.length - 1 ? idx + 1 : 0);
 	const prev = () => setIdx(idx > 0 ? idx - 1 : project.images.length - 1);
 
-	/* useEffect(() => {
-        plausible('Image', {
-            props: {
-                project: project.title,
-                image: project.images[idx],
-            },
-        });
-    }, [idx, plausible, project.images, project.title]); */
+	useEffect(() => {
+		plausible("Image", {
+			props: {
+				project: project.title,
+				image: project.images[idx],
+			},
+		});
+	}, [idx, plausible, project.images, project.title]);
 
 	return (
 		<div className="relative flex h-auto select-none items-center justify-center overflow-x-hidden">

src/components/cards/ProjectCard.tsx

@@ -1,17 +1,21 @@
+"use client";
+
 import clsx from "clsx";
+import { Star } from "lucide-react";
+import { usePlausible } from "next-plausible";
 
 import TagList from "../TagList";
 import Markdown from "../Markdown";
 import ImagesDialog from "../dialogs/ImagesDialog";
-import { Star } from "lucide-react";
 
 export default function ProjectCard({ project }: { project: Project }) {
-	/* const openImageModal = () =>
+	const plausible = usePlausible();
+	const openImageModal = () =>
 		plausible("View Project Image", {
 			props: {
 				project: project.title,
 			},
-		}); */
+		});
 
 	const images = project.images?.length
 		? project.images.filter(i => i.length > 0)
@@ -28,7 +32,7 @@ export default function ProjectCard({ project }: { project: Project }) {
 							height={400}
 							src={images[0]}
 							alt={project.title}
-							//onClick={openImageModal}
+							onClick={openImageModal}
 							className="aspect-video w-full cursor-pointer select-none rounded-lg border border-foreground object-cover shadow-sm transition-all hover:sm:scale-[101%]"
 						/>
 					</ImagesDialog>