Issue 8 individual art pages

client/next.config.mjs

@@ -1,27 +1,22 @@
-// import os from "node:os";
-// import isInsideContainer from "is-inside-container";
-
-// const isWindowsDevContainer = () =>
-//   os.release().toLowerCase().includes("microsoft") && isInsideContainer();
-
 /** @type {import('next').NextConfig} */
 
-const config = {
+const nextConfig = {
   reactStrictMode: true,
   turbopack: {
     root: import.meta.dirname,
   },
   outputFileTracingRoot: import.meta.dirname,
   images: {
     domains: ["localhost"],
+    remotePatterns: [
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+        port: '8000',
+        pathname: '/media/**',
+      },
+    ],
   },
-  // Turns on file change polling for the Windows Dev Container
-  // Doesn't work currently for turbopack, so file changes will not automatically update the client.
-  // watchOptions: isWindowsDevContainer()
-  // ? {
-  //     pollIntervalMs: 1000
-  //   }
-  // : undefined,
 };
 
-export default config;
+export default nextConfig;

client/src/components/main/Navbar.tsx

@@ -18,7 +18,7 @@ export default function Navbar() {
 
   return (
     <>
-      <header className="sticky top-0 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
+      <header className="sticky top-0 z-10 flex h-24 w-full flex-wrap items-center justify-center rounded-md border-b border-border/20 bg-background px-20 font-jersey10">
         <Link
           href="/"
           className="flex flex-none items-center gap-3 text-2xl md:mr-5"

client/src/components/ui/go-back-button.tsx

@@ -0,0 +1,38 @@
+import Link from "next/link";
+
+interface GoBackButtonProps {
+  url: string;
+  label: string;
+}
+const GoBackButton = ({ url, label }: GoBackButtonProps) => {
+  return (
+    <Link href={url} aria-label="Go back to gallery">
+      <button
+        className="group relative mb-10 h-14 w-48 rounded-2xl bg-neutral_1 text-center text-xl font-semibold text-light_3"
+        type="button"
+      >
+        <div className="absolute left-1 top-[4px] z-10 flex h-12 w-1/4 items-center justify-center rounded-xl bg-light_2 duration-500 group-hover:w-[184px]">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 1024 1024"
+            height="25px"
+            width="25px"
+            aria-hidden="true"
+          >
+            <path
+              d="M224 480h640a32 32 0 1 1 0 64H224a32 32 0 0 1 0-64z"
+              fill="#000000"
+            />
+            <path
+              d="m237.248 512 265.408 265.344a32 32 0 0 1-45.312 45.312l-288-288a32 32 0 0 1 0-45.312l288-288a32 32 0 1 1 45.312 45.312L237.248 512z"
+              fill="#000000"
+            />
+          </svg>
+        </div>
+        <p className="translate-x-2">{label}</p>
+      </button>
+    </Link>
+  );
+};
+
+export default GoBackButton;

client/src/components/ui/image-card.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+import React from "react";
+
+interface ImageCard {
+  imageSrc?: string;
+  imageAlt?: string;
+  children?: React.ReactNode;
+}
+
+const ImageCard = ({ imageSrc, imageAlt = "Image", children }: ImageCard) => {
+  return (
+    <div className="group p-4">
+      <div className="box-border flex h-[20rem] w-[20rem] flex-1 cursor-pointer select-none items-center justify-center self-stretch overflow-hidden rounded-[10px] border border-white bg-[#CED1FE] shadow-[12px_17px_51px_rgba(0,0,0,0.22)] backdrop-blur-md transition-all duration-500 hover:scale-105 hover:border-black active:rotate-[1.7deg] active:scale-95">
+        {imageSrc ? (
+          <Image
+            src={imageSrc}
+            alt={imageAlt}
+            width={190}
+            height={254}
+            className="h-full w-full object-cover"
+          />
+        ) : (
+          children || <span className="font-bold text-black">No Image</span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageCard;

client/src/components/ui/image-placeholder.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const ImagePlaceholder = () => {
+  return (
+    <div
+      data-layer="Placeholder image"
+      className="PlaceholderImage bg-light-2 flex h-[500px] w-[500px] items-center justify-center rounded-[10px]"
+    >
+      <div data-svg-wrapper data-layer="Vector" className="Vector">
+        <svg
+          width="96"
+          height="96"
+          viewBox="0 0 96 96"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M96 85.3333V10.6667C96 4.8 91.2 0 85.3333 0H10.6667C4.8 0 0 4.8 0 10.6667V85.3333C0 91.2 4.8 96 10.6667 96H85.3333C91.2 96 96 91.2 96 85.3333ZM29.3333 56L42.6667 72.0533L61.3333 48L85.3333 80H10.6667L29.3333 56Z"
+            fill="var(--neutral-1, #1B1F4C)"
+          />
+        </svg>
+      </div>
+    </div>
+  );
+};
+export default ImagePlaceholder;

client/src/components/ui/modal/error-modal.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+
+interface ErrorModalProps {
+  message: string | null;
+  onClose: () => void;
+}
+
+const ErrorModal = ({ message, onClose = () => {} }: ErrorModalProps) => {
+  const [isVisible, setIsVisible] = useState(true);
+  if (!isVisible || !message) {
+    return null;
+  }
+
+  function onModalClose() {
+    setIsVisible(false);
+    onClose();
+  }
+
+  return (
+    // Backdrop overlay
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 backdrop-blur-sm"
+      onClick={onModalClose} // Close when clicking outside the modal
+    >
+      {/* Modal content container */}
+      <div
+        className="relative m-auto flex w-full max-w-md flex-col rounded bg-white p-6 text-black"
+        onClick={(e) => e.stopPropagation()} // Prevent closing when clicking inside the modal
+      >
+        <h2 className="text-xl font-bold md:leading-loose">Error</h2>
+        <p className="leading-normal">{message}</p>
+        <div className="mt-8 inline-flex justify-end">
+          <button
+            className="text-grey-darkest flex-1 rounded bg-error px-4 py-2 text-white md:flex-none"
+            onClick={onModalClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorModal;

client/src/pages/artwork/[id].tsx

@@ -0,0 +1,201 @@
+import { Instagram, MessageSquare } from "lucide-react";
+import { GetServerSideProps } from "next";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+import GoBackButton from "@/components/ui/go-back-button";
+import ImagePlaceholder from "@/components/ui/image-placeholder";
+import ErrorModal from "@/components/ui/modal/error-modal";
+import api from "@/lib/api";
+import { Art } from "@/types/art";
+
+interface ArtworkPageProps {
+  artwork?: Art;
+  error?: string;
+}
+
+function displayContributors(artwork: Art) {
+  return (
+    <div>
+      <div
+        data-layer="Artwork Details"
+        className="ArtworkDetails flex flex-col justify-start gap-2.5 py-5"
+      >
+        <div
+          data-layer="Contributors Section"
+          className="ContributorsSection relative"
+        >
+          <div
+            data-layer="Contributors"
+            className="Contributors justify-start font-jersey10 text-4xl font-normal tracking-wide text-light_3"
+          >
+            Contributors
+          </div>
+        </div>
+        <div
+          data-layer="Contributors List"
+          className="ContributorsList relative flex flex-col gap-3 p-3"
+        >
+          {artwork.contributors?.map((contributor) => (
+            <div className="flex flex-row justify-between" key={contributor.id}>
+              <div className="justify-center font-dmSans text-xl font-normal leading-8 tracking-wide text-light_1 [text-shadow:_0px_4px_4px_rgb(0_0_0_/_0.25)]">
+                {contributor.member_name}
+              </div>
+              <div className="flex gap-2">
+                {contributor.discord_url && (
+                  <a
+                    href={contributor.discord_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex h-[30px] w-[30px] items-center justify-center rounded-full bg-[#9CA4FD] transition-opacity hover:opacity-80"
+                  >
+                    <MessageSquare className="h-4 w-4 text-white" />
+                  </a>
+                )}
+                {contributor.instagram_url && (
+                  <a
+                    href={contributor.instagram_url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex h-[30px] w-[30px] items-center justify-center rounded-full bg-[#9CA4FD] transition-opacity hover:opacity-80"
+                  >
+                    <Instagram className="h-4 w-4 text-white" />
+                  </a>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function ArtworkPage({ artwork, error }: ArtworkPageProps) {
+  const router = useRouter();
+  if (error) {
+    return <ErrorModal message={error} onClose={() => router.back()} />;
+  }
+  return (
+    <div
+      data-layer="Individual Game Page alt 9"
+      className="IndividualGamePageAlt9"
+    >
+      <div
+        data-layer="Frame 1100"
+        className="Frame1100 mb-4 inline-flex flex-col items-start justify-center gap-10 bg-slate-950 p-3 md:pl-12"
+      >
+        <div
+          data-layer="< Gallery"
+          className="Gallery h-10 justify-start font-dmSans text-3xl font-bold leading-10 tracking-tight text-light_1"
+        >
+          <GoBackButton url="/artwork" label="Gallery" />
+        </div>
+      </div>
+      <div
+        data-layer="Artwork Content"
+        className="ArtworkContent justify-start bg-neutral_1 md:flex"
+      >
+        <div
+          data-layer="Artwork Image Panel"
+          className="ArtworkImagePanel relative flex content-center justify-center"
+        >
+          {artwork!.media ? (
+            <Image
+              src={artwork!.media}
+              alt="Artwork image"
+              width={500}
+              height={500}
+              className="relative block sm:h-auto sm:max-w-full md:max-h-full"
+            />
+          ) : (
+            <ImagePlaceholder />
+          )}
+        </div>
+        <div
+          data-layer="Desktop Artwork Info"
+          className="DesktopArtworkInfo relative hidden flex-auto p-10 md:flex"
+        >
+          <div className="flex flex-1 flex-col gap-10">
+            <div
+              data-layer="Art Name"
+              className="ArtName justify-start font-jersey10 text-8xl font-normal leading-[76px] tracking-wide text-light_3"
+            >
+              {artwork!.name}
+            </div>
+            <div
+              data-layer="Description Section"
+              className="DescriptionSection flex-col items-start justify-start gap-7"
+            >
+              <div
+                data-layer="Artwork Description"
+                className="justify-start self-stretch"
+              >
+                <span className="font-dmSans text-xl font-normal leading-8 tracking-wide text-light_1">
+                  {artwork!.description}
+                </span>
+              </div>
+            </div>
+            {displayContributors(artwork!)}
+          </div>
+        </div>
+      </div>
+      <div className="p-10 md:hidden">
+        <div
+          data-layer="Art Name"
+          className="ArtName flex justify-center font-jersey10 text-8xl font-normal leading-[76px] tracking-wide text-light_3"
+        >
+          {artwork!.name}
+        </div>
+        <div
+          data-layer="Description Section Mobile"
+          className="DescriptionSectionMobile flex-col items-start justify-start pt-7"
+        >
+          <div className="justify-start self-stretch">
+            <span className="font-dmSans text-xl font-normal leading-8 tracking-wide text-light_1">
+              {artwork!.description}
+            </span>
+          </div>
+        </div>
+        {displayContributors(artwork!)}
+      </div>
+
+      <div data-layer="Frame 1101" className="Frame1101 bg-slate-950 py-10">
+        <div
+          data-layer="Game Page"
+          className="GamePage flex items-center justify-center bg-dark_2"
+        >
+          <Image
+            alt="Game Image"
+            data-layer="image 15"
+            src="/placeholder1293x405.svg"
+            width="1293"
+            height="405"
+            className="relative block p-5 sm:h-auto sm:max-w-full md:max-h-full md:w-auto"
+          />
+        </div>
+      </div>
+      <div
+        data-layer="footer"
+        className="Footer h-72 overflow-hidden bg-indigo-950"
+      >
+        TODO add footer
+      </div>
+    </div>
+  );
+}
+
+export const getServerSideProps: GetServerSideProps<ArtworkPageProps> = async (
+  context,
+) => {
+  const { id } = context.params as { id: string };
+  try {
+    const artResponse = await api.get<Art>(`arts/${id}`);
+    const artwork = artResponse.data;
+    return { props: { artwork } };
+  } catch (err: unknown) {
+    return {
+      props: { error: (err as Error).message || "Failed to load artwork." },
+    };
+  }
+};