Sub 20 artist page

components/ArtistPage/ArtistContent.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+
+import Card from "../LandingPage/Projects/Card";
+import ArtistTabBar from "./ArtistTabBar";
+import Collectors from "./Collectors";
+import { projects } from "data/projects";
+
+interface Props {
+  artistAddress: string | undefined;
+  width: number;
+}
+
+const ArtistContent = ({ artistAddress, width }: Props) => {
+  const [mainContent, setMainContent] = useState<string>("projects");
+
+  if (mainContent == "projects") {
+    const filteredProjects = projects.filter((project) => {
+      if (project.artistAddress == artistAddress) {
+        return true;
+      }
+    });
+    return (
+      <div className="mt-20 flex w-full flex-col items-center max-sm:mt-4 ">
+        <ArtistTabBar
+          mainContent={mainContent}
+          setMainContent={setMainContent}
+          width={width}
+        />
+
+        <hr className="w-full border-[0.5px] border-black dark:border-white" />
+        <div
+          className="mt-8 grid max-w-[calc(100%-180px)] grid-cols-1 gap-8 max-sm:max-w-[calc(100%-3em)] md:grid-cols-2 xl:grid-cols-3"
+          style={{ width }}
+        >
+          {filteredProjects.map((project) => (
+            <Card key={project.name} project={project} />
+          ))}
+        </div>
+      </div>
+    );
+  } else if (mainContent == "collectors") {
+    return (
+      <div className="mt-20 flex w-full flex-col items-center max-sm:mt-4 ">
+        <ArtistTabBar
+          mainContent={mainContent}
+          setMainContent={setMainContent}
+          width={width}
+        />
+
+        <hr className="w-full border-[0.5px] border-black dark:border-white" />
+        <div
+          className="mt-8 flex max-w-[calc(100%-180px)] flex-col items-center"
+          style={{ width }}
+        >
+          <Collectors />
+        </div>
+      </div>
+    );
+  }
+};
+
+export default ArtistContent;

components/ArtistPage/ArtistHead.tsx

@@ -0,0 +1,59 @@
+interface Props {
+  artistAddress: string;
+  artistBio: string;
+  artistName: string;
+}
+
+export const ArtistHead = ({ artistAddress, artistBio, artistName }: Props) => {
+  return (
+    <div>
+      <div className="my-28 ml-24 hidden h-[25svh] w-1/2 items-center gap-10 md:flex">
+        <img
+          alt=""
+          className="h-full self-start rounded md:block md:rounded-none"
+          src="/projects/blonks.png"
+        ></img>
+        <div className="flex size-full flex-col items-start justify-start">
+          <div className="mb-8">
+            <h1 className="h-fit align-text-top leading-none">{artistName}</h1>
+            <p className="text-base font-light italic">
+              {artistAddress.slice(0, 5) +
+                "..." +
+                artistAddress.slice(
+                  artistAddress.length - 5,
+                  artistAddress.length,
+                )}
+            </p>
+          </div>
+          <p className="hidden pr-5 md:block">{artistBio}</p>
+        </div>
+        <p className="pr-5 md:hidden">{artistBio}</p>
+      </div>
+      <div className="mx-6 mt-10 flex h-fit flex-col md:hidden">
+        <div className="mb-5 flex h-[5svh] gap-5">
+          <img
+            alt=""
+            className="h-full self-start rounded-full md:block md:rounded-none"
+            src="/projects/blonks.png"
+          ></img>
+          <div className="mb-8">
+            <h1 className="h-fit align-text-top leading-tight">{artistName}</h1>
+            <p className="text-xs font-light italic">
+              {artistAddress.slice(0, 5) +
+                "..." +
+                artistAddress.slice(
+                  artistAddress.length - 5,
+                  artistAddress.length,
+                )}
+            </p>
+          </div>
+        </div>
+        <p className="pr-5 md:block">{artistBio}</p>
+      </div>
+    </div>
+  );
+};
+
+ArtistHead.defaultProps = {
+  artistAddress: "0xF8d9056db2C2189155bc25A30269dc5dDeD15d46",
+};

components/ArtistPage/ArtistTabBar.tsx

@@ -0,0 +1,40 @@
+import Tab from "../LandingPage/Projects/Tab";
+
+interface Props {
+  mainContent: string;
+  setMainContent: React.Dispatch<React.SetStateAction<string>>;
+  width: number;
+}
+
+const ArtistTabBar = ({
+  mainContent,
+  setMainContent,
+  width,
+}: Props): React.JSX.Element => (
+  <div
+    className="flex max-w-[calc(100%-180px)] items-start justify-between max-sm:max-w-[calc(100%-3em)] sm:px-2"
+    id="project-tab-bar-container"
+    style={{ width }}
+  >
+    <div
+      className="flex items-center gap-2 sm:gap-12"
+      id="project-tabs-container"
+    >
+      <Tab
+        active={mainContent === "projects"}
+        onClick={() => setMainContent("projects")}
+      >
+        Projects
+      </Tab>
+
+      <Tab
+        active={mainContent === "collectors"}
+        onClick={() => setMainContent("collectors")}
+      >
+        Collectors
+      </Tab>
+    </div>
+  </div>
+);
+
+export default ArtistTabBar;

components/ArtistPage/CollectorCard.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+interface Projects {
+  editionsOwned: number[];
+  title: string;
+}
+
+interface RowProps {
+  editionsOwned: number[];
+  title: string;
+}
+
+interface Props {
+  collectorName: string;
+  projects: Projects[];
+}
+
+const CollectorCard = ({ collectorName, projects }: Props) => {
+  const ProjectCollectRow = ({ editionsOwned, title }: RowProps) => {
+    return (
+      <div className="flex h-fit w-full items-center justify-between border-b pl-3 last:border-none">
+        <p className="font-extralight">{title}</p>
+        <div className="my-2 w-fit max-w-[50%]">
+          {editionsOwned.map((e, index) => (
+            <span key={index}>
+              {index == editionsOwned.length - 1 ?
+                "#" + e.toString()
+              : "#" + e.toString() + ", "}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="mb-10 flex h-fit w-full flex-col border-y border-l md:w-4/5 md:flex-row md:border-l-0">
+      <div className="flex w-full items-center justify-center border-b md:w-1/4 md:border-b-0 md:border-r">
+        <p className="font-bold">{collectorName}</p>
+      </div>
+
+      <div className="w-full md:w-3/4">
+        {projects.map((p) => (
+          <ProjectCollectRow
+            editionsOwned={p.editionsOwned}
+            key={p.title}
+            title={p.title}
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default CollectorCard;

components/ArtistPage/Collectors.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+import CollectorCard from "./CollectorCard";
+import { collectorData } from "data/collectors";
+
+interface OwnedItem {
+  editionsOwned: number[];
+  title: string;
+}
+
+interface CollectorData {
+  name: string;
+  owned: OwnedItem[];
+}
+
+const Collectors = () => {
+  return (
+    <div className="w-full">
+      {collectorData.map((collector?: CollectorData, index?: number) => (
+        <CollectorCard
+          collectorName={collector ? collector.name : ""}
+          key={collector ? collector.name : index}
+          projects={collector ? collector.owned : []}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Collectors;

components/Header/MobileNav.tsx

@@ -7,16 +7,16 @@ import type { SetState } from "utils/types";
 
 import ConnectButton from "./ConnectButton";
 import SocialIcons from "./SocialIcons";
-import { artistUrls, projects } from "data/projects";
-import { cn } from "utils/helpers";
+import { projects } from "data/projects";
+import { cn, deKebabify } from "utils/helpers";
 
 interface Props {
   isOpen: boolean;
   setIsOpen: SetState<boolean>;
 }
 
-const artists = projects.map(({ artist }) => artist);
-const uniqueArtists = [...new Set(artists)];
+const artistSlugs = projects.map(({ artistSlug }) => artistSlug);
+const uniqueArtists = [...new Set(artistSlugs)];
 
 const MobileNav = ({ isOpen, setIsOpen }: Props): React.JSX.Element => {
   const clickHandler = () => setIsOpen(false);
@@ -56,19 +56,15 @@ const MobileNav = ({ isOpen, setIsOpen }: Props): React.JSX.Element => {
 
         <h4 className="underline">Artists</h4>
         <ul className="grid w-full grid-cols-2 gap-2 p-2">
-          {uniqueArtists.map((artist) => {
-            const url = artistUrls[artist];
-
+          {uniqueArtists.map((slug) => {
             return (
-              <ExternalListItem
-                href={url}
-                key={artist}
+              <InternalListItem
+                href={`/artist/${slug}`}
+                key={slug}
                 onClick={clickHandler}
-                rel="noreferrer"
-                target="_blank"
               >
-                {artist}
-              </ExternalListItem>
+                {deKebabify(slug)}
+              </InternalListItem>
             );
           })}
         </ul>

components/Header/NavMenu.tsx

@@ -11,11 +11,11 @@ import {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
 } from "components/shadcn/NavigationMenu";
-import { artistUrls, projects } from "data/projects";
-import { cn } from "utils/helpers";
+import { projects } from "data/projects";
+import { cn, deKebabify } from "utils/helpers";
 
-const artists = projects.map(({ artist }) => artist);
-const uniqueArtists = [...new Set(artists)];
+const artistSlugs = projects.map(({ artistSlug }) => artistSlug);
+const uniqueArtists = [...new Set(artistSlugs)];
 
 export const NavMenu = () => {
   return (
@@ -50,18 +50,11 @@ export const NavMenu = () => {
           <NavigationMenuTrigger>Artists</NavigationMenuTrigger>
           <NavigationMenuContent>
             <ul className="grid w-[400px] gap-1 p-2 md:w-[500px] md:grid-cols-2">
-              {uniqueArtists.map((artist) => {
-                const url = artistUrls[artist];
-
+              {uniqueArtists.map((slug) => {
                 return (
-                  <ExternalListItem
-                    href={url}
-                    key={artist}
-                    rel="noreferrer"
-                    target="_blank"
-                  >
-                    {artist}
-                  </ExternalListItem>
+                  <InternalListItem href={`/artist/${slug}`} key={slug}>
+                    {deKebabify(slug)}
+                  </InternalListItem>
                 );
               })}
             </ul>

components/LandingPage/Projects/Card.tsx

@@ -12,7 +12,7 @@ interface Props {
 
 const Card = ({ project }: Props): React.JSX.Element => {
   const {
-    artist,
+    artistSlug: artist,
     externalUrl,
     image,
     local,

components/LandingPage/Projects/Grid.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 
-import { type ProjectSort, Status, projects } from "../../../data/projects";
+import { type ProjectSort, projects } from "../../../data/projects";
 import Card from "./Card";
 import TabBar from "./TabBar";
 
@@ -12,14 +12,14 @@ const Grid = ({ width }: Props): React.JSX.Element => {
   const [activeTab, setActiveTab] = useState<ProjectSort>("all");
 
   const filteredProjects = projects.filter((project) => {
-    if (activeTab === "minting") {
-      return project.status === Status.Minting;
+    if (activeTab === "Minting") {
+      return project.status === "Minting";
     }
-    if (activeTab === "upcoming") {
-      return project.status === Status.Upcoming;
+    if (activeTab === "Upcoming") {
+      return project.status === "Upcoming";
     }
-    if (activeTab === "closed") {
-      return project.status === Status.Closed;
+    if (activeTab === "Closed") {
+      return project.status === "Closed";
     }
     return true;
   });