Add tags and categories

src/app/artworks/[id]/page.tsx

@@ -24,7 +24,7 @@ export default async function ArtworkSinglePage({ params }: { params: { id: stri
     }
   })
 
-  const categories = await prisma.artCategory.findMany({ orderBy: { sortIndex: "asc" } });
+  const categories = await prisma.artCategory.findMany({ include: { tags: true }, orderBy: { sortIndex: "asc" } });
   const tags = await prisma.artTag.findMany({ orderBy: { sortIndex: "asc" } });
 
   if (!item) return <div>Artwork with this id not found</div>

src/app/categories/[id]/page.tsx

@@ -0,0 +1,18 @@
+import EditCategoryForm from "@/components/categories/EditCategoryForm";
+import { prisma } from "@/lib/prisma";
+
+export default async function PortfolioCategoriesEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const category = await prisma.artCategory.findUnique({
+    where: {
+      id,
+    }
+  })
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Category</h1>
+      {category && <EditCategoryForm category={category} />}
+    </div>
+  );
+}

src/app/categories/new/page.tsx

@@ -0,0 +1,10 @@
+import NewCategoryForm from "@/components/categories/NewCategoryForm";
+
+export default function PortfolioCategoriesNewPage() {
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Category</h1>
+      <NewCategoryForm />
+    </div>
+  );
+}

src/app/categories/page.tsx

@@ -0,0 +1,20 @@
+import ItemList from "@/components/lists/ItemList";
+import { prisma } from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function CategoriesPage() {
+  const items = await prisma.artCategory.findMany({})
+
+  return (
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Art Categories</h1>
+        <Link href="/categories/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new category
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="categories" /> : <p>There are no categories yet. Consider adding some!</p>}
+    </div>
+  );
+}

src/app/tags/[id]/page.tsx

@@ -0,0 +1,23 @@
+import EditTagForm from "@/components/tags/EditTagForm";
+import { prisma } from "@/lib/prisma";
+
+export default async function PortfolioTagsEditPage({ params }: { params: { id: string } }) {
+  const { id } = await params;
+  const tag = await prisma.artTag.findUnique({
+    where: {
+      id,
+    },
+    include: {
+      categories: true
+    }
+  })
+
+  const categories = await prisma.artCategory.findMany({ include: { tags: true }, orderBy: { sortIndex: "asc" } });
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">Edit Tag</h1>
+      {tag && <EditTagForm tag={tag} categories={categories} />}
+    </div>
+  );
+}

src/app/tags/new/page.tsx

@@ -0,0 +1,13 @@
+import NewTagForm from "@/components/tags/NewTagForm";
+import { prisma } from "@/lib/prisma";
+
+export default async function PortfolioTagsNewPage() {
+  const categories = await prisma.artCategory.findMany({ include: { tags: true }, orderBy: { sortIndex: "asc" } });
+
+  return (
+    <div>
+      <h1 className="text-2xl font-bold mb-4">New Tag</h1>
+      <NewTagForm categories={categories} />
+    </div>
+  );
+}

src/app/tags/page.tsx

@@ -0,0 +1,20 @@
+import ItemList from "@/components/lists/ItemList";
+import { prisma } from "@/lib/prisma";
+import { PlusCircleIcon } from "lucide-react";
+import Link from "next/link";
+
+export default async function PortfolioTagsPage() {
+  const items = await prisma.artTag.findMany({})
+
+  return (
+    <div>
+      <div className="flex gap-4 justify-between pb-8">
+        <h1 className="text-2xl font-bold mb-4">Art Tags</h1>
+        <Link href="/tags/new" className="flex gap-2 items-center cursor-pointer bg-primary hover:bg-primary/90 text-primary-foreground px-4 py-2 rounded">
+          <PlusCircleIcon className="h-[1.2rem] w-[1.2rem] scale-100 rotate-0 transition-all text-primary-foreground" /> Add new tag
+        </Link>
+      </div>
+      {items && items.length > 0 ? <ItemList items={items} type="tags" /> : <p>There are no tags yet. Consider adding some!</p>}
+    </div>
+  );
+}