Feature: Individual Art and Art Showcase Page - Issue #8 + #40

client/documentation/admin-dashboard/members.md

@@ -0,0 +1,17 @@
+## Member Profiles
+
+Profiles of club members can be added and edited at the row 'Member' of the GAME_DEV section on the main admin page.
+
+### Fields
+
+**Name:** Required field for the member's name. A character field (includes letters, numbers and symbols) of maximum length 200 characters.
+
+**Active:** Checkbox to represent whether a member is an active participant in the club. If the checkbox is not ticked then the member's profile will not be displayed on the website.
+
+**Profile Picture:** Optional field to upload a profile picture. Must be an image file, and will display best if the image is at least 128 by 128 px in size. If no profile picture is provided then the member's initials will be displayed instead.
+
+**About:** Optional field for a bio. A character field of maximum length 256 characters.
+
+**Pronouns:** Optional field for the member's pronouns. A character field of maximum length 20 characters.
+
+**Social media links:** Optional section to display links to the member's social media profiles. Requires a link to the profile (character field of maximum length 2083) and, optionally, the profile username (character field of maximum length 200). If a username is not supplied then only a social media icon will be displayed with the link attached, otherwise the username will be placed next to the relevant icon. The type of icon to be displayed (e.g. instagram, linkedin, generic link) is inferred from the social media link provided.

client/next.config.mjs

@@ -1,12 +1,6 @@
-// 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,
@@ -27,4 +21,4 @@ const config = {
   // : undefined,
 };
 
-export default config;
+export default nextConfig;

client/src/components/ui/ContributorsList.tsx

@@ -0,0 +1,59 @@
+import Link from "next/link";
+
+import { ArtContributor } from "@/types/art-contributor";
+
+interface ContributorsListProps {
+  contributors: ArtContributor[];
+}
+
+export default function ContributorsList({
+  contributors,
+}: ContributorsListProps) {
+  if (contributors.length === 0) {
+    return null;
+  }
+
+  return (
+    <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="ArtName text-light_3 justify-start font-jersey10 text-6xl font-normal leading-[76px] tracking-wide text-accent"
+        >
+          Contributors
+        </div>
+      </div>
+      <div
+        data-layer="Contributors List"
+        className="ContributorsList relative flex flex-col gap-3 p-3"
+      >
+        <div className="mt-auto">
+          <div className="space-y-2.5">
+            {contributors.map((contributor) => (
+              <div
+                key={contributor.id}
+                className="mb-2 font-sans text-xl font-normal leading-8 tracking-wide text-light_1"
+              >
+                <Link
+                  href={`/members/${contributor.member_id}`}
+                  className="text-accent hover:underline"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  {contributor.member_name}
+                </Link>
+                {" - "}
+                <span>{contributor.role}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/components/ui/GoBackButton.tsx

@@ -0,0 +1,30 @@
+import Image from "next/image";
+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="text-light_3 group relative mb-10 h-14 w-48 rounded-2xl bg-neutral_1 text-center text-xl font-semibold"
+        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]">
+          <Image
+            src="/go-back-icon.svg"
+            alt=""
+            width={25}
+            height={25}
+            aria-hidden="true"
+          />
+        </div>
+        <p className="translate-x-2">{label}</p>
+      </button>
+    </Link>
+  );
+};
+
+export default GoBackButton;

client/src/components/ui/ImageCard.tsx

@@ -0,0 +1,111 @@
+import Image from "next/image";
+import { useRouter } from "next/router";
+import React from "react";
+
+interface ImageCardProps {
+  imageSrc?: string;
+  imageAlt?: string;
+  children?: React.ReactNode;
+  backContent?: React.ReactNode;
+  href?: string;
+  disableFlip?: boolean;
+  placeholder?: React.ReactNode;
+}
+
+const ImageCard = ({
+  imageSrc,
+  imageAlt = "Image",
+  children,
+  backContent,
+  href,
+  disableFlip = false,
+  placeholder,
+}: ImageCardProps) => {
+  const router = useRouter();
+  const [isFlipped, setIsFlipped] = React.useState(false);
+  const [isMobile, setIsMobile] = React.useState(false);
+  const [hasImageError, setHasImageError] = React.useState(false);
+
+  React.useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    checkMobile();
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
+  }, []);
+
+  const handleClick = () => {
+    // On mobile, navigate directly if href is provided
+    if (isMobile && href) {
+      router.push(href);
+    } else if (backContent && !disableFlip && !hasImageError) {
+      // On desktop, toggle flip state
+      setIsFlipped(!isFlipped);
+    }
+  };
+
+  return (
+    <div className="p-4" style={{ perspective: "1200px" }}>
+      <div
+        className={`relative h-[30rem] w-full max-w-[20rem] select-none rounded-[10px] shadow-[12px_17px_51px_rgba(0,0,0,0.22)] transition-transform duration-500 ${
+          (isMobile && href) || (backContent && !disableFlip && !hasImageError)
+            ? "cursor-pointer"
+            : "cursor-default"
+        }`}
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+        }}
+        onClick={handleClick}
+      >
+        <div
+          className="absolute inset-0 overflow-hidden rounded-[10px] border border-white bg-dark_alt backdrop-blur-md"
+          style={{ backfaceVisibility: "hidden" }}
+        >
+          {imageSrc && !hasImageError ? (
+            <>
+              <Image
+                src={imageSrc}
+                alt={imageAlt}
+                width={400}
+                height={600}
+                className="h-full w-full object-cover"
+                onError={() => {
+                  setHasImageError(true);
+                  setIsFlipped(false);
+                }}
+              />
+              {children && (
+                <div className="bg-dark_1/40 absolute inset-0 flex items-center justify-center text-light_1">
+                  {children}
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="bg-dark_alt/60 flex h-full w-full items-center justify-center text-light_1">
+              {placeholder || children || (
+                <span className="font-bold">No Image</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {backContent && (
+          <div
+            className="absolute inset-0 flex flex-col overflow-y-auto rounded-[10px] border border-white bg-dark_3 p-6 text-light_1"
+            style={{
+              backfaceVisibility: "hidden",
+              transform: "rotateY(180deg)",
+            }}
+          >
+            {backContent}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ImageCard;

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

@@ -0,0 +1,21 @@
+import Image from "next/image";
+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">
+        <Image
+          src="/placeholder-icon.svg"
+          alt="Placeholder icon"
+          width={96}
+          height={96}
+        />
+      </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 bg-error flex-1 rounded px-4 py-2 text-white md:flex-none"
+            onClick={onModalClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorModal;

client/src/hooks/use-artwork-data.ts

@@ -0,0 +1,62 @@
+import { Art } from "@/types/art";
+
+export const generateMockArtworks = (count: number): Art[] => {
+  const artworks: Art[] = [];
+  for (let i = 1; i <= count; i++) {
+    artworks.push({
+      art_id: i,
+      name: `Artwork ${i}`,
+      description: "Mock artwork description",
+      media: `http://localhost:8000/media/art/mock_artwork_${i}.png`,
+      active: true,
+      source_game_id: null,
+      source_game_name: null,
+      contributors: [
+        {
+          id: i * 10 + 1,
+          member_id: i * 10 + 1,
+          member_name: "Contributor 1",
+          role: "artist",
+        },
+        {
+          id: i * 10 + 2,
+          member_id: i * 10 + 2,
+          member_name: "Contributor 2",
+          role: "designer",
+        },
+      ],
+      showcase_description: `Showcase description for artwork ${i}`,
+      isMock: true,
+    });
+  }
+  return artworks;
+};
+
+export const generateMockArtwork = (id: string): Art => {
+  return {
+    art_id: Number(id),
+    name: "Mock Artwork Title",
+    description:
+      "Lorem ipsum dolor sit amet. Non numquam dicta nam autem dicta 33 error molestias et repellat consequatur eum iste expedita est dolorem libero et quas provident!",
+    media: `http://localhost:8000/media/art/mock_artwork_${id}.png`,
+    active: true,
+    source_game_id: null,
+    source_game_name: null,
+    contributors: [
+      {
+        id: 1,
+        member_id: 1,
+        member_name: "Contributor 1",
+        role: "user1",
+      },
+      {
+        id: 2,
+        member_id: 2,
+        member_name: "Contributor 2",
+        role: "user2",
+      },
+    ],
+    showcase_description: "Featured artwork showcase description",
+    isMock: true,
+  };
+};