Refactor mosaic

src/components/portfolio/images/FilterBar.tsx

@@ -1,33 +1,93 @@
 "use client"
 
-import { PortfolioType } from "@/generated/prisma";
+import { PortfolioAlbum, PortfolioType } from "@/generated/prisma";
 import { usePathname, useRouter } from "next/navigation";
 
+type FilterBarProps = {
+  types: PortfolioType[];
+  currentType: string;
+  currentPublished: string;
+  groupBy: "year" | "album";
+  groupId: string;
+  years: number[];
+  albums: PortfolioAlbum[];
+};
+
 export default function FilterBar({
   types,
   currentType,
   currentPublished,
-}: {
-  types: PortfolioType[];
-  currentType: string;
-  currentPublished: string;
-}) {
+  groupBy,
+  groupId,
+  years,
+  albums
+}: FilterBarProps) {
   const router = useRouter();
   const pathname = usePathname();
   const searchParams = new URLSearchParams();
 
   const setFilter = (key: string, value: string) => {
+    const params = new URLSearchParams(window.location.search);
+
     if (value !== "all") {
-      searchParams.set(key, value);
+      params.set(key, value);
     } else {
-      searchParams.delete(key);
+      params.delete(key);
     }
 
-    router.push(`${pathname}?${searchParams.toString()}`);
+    if (key === "groupBy") {
+      params.delete("year");
+      params.delete("album");
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
   };
 
   return (
     <div className="flex flex-wrap gap-4 border-b pb-4">
+      {/* GroupBy Toggle */}
+      <div className="flex gap-2 items-center">
+        <span className="text-sm font-medium text-muted-foreground">Group by:</span>
+        <FilterButton
+          active={groupBy === "year"}
+          label="Year"
+          onClick={() => setFilter("groupBy", "year")}
+        />
+        <FilterButton
+          active={groupBy === "album"}
+          label="Album"
+          onClick={() => setFilter("groupBy", "album")}
+        />
+      </div>
+
+      {/* Subnavigation */}
+      <div className="flex gap-2 items-center flex-wrap">
+        <span className="text-sm font-medium text-muted-foreground">Filter:</span>
+        <FilterButton
+          active={groupId === "all"}
+          label="All"
+          onClick={() => setFilter(groupBy, "all")}
+        />
+        {groupBy === "year" &&
+          years.map((year) => (
+            <FilterButton
+              key={year}
+              active={groupId === String(year)}
+              label={String(year)}
+              onClick={() => setFilter("year", String(year))}
+            />
+          ))}
+        {groupBy === "album" &&
+          albums.map((album) => (
+            <FilterButton
+              key={album.id}
+              active={groupId === album.id}
+              label={album.name}
+              onClick={() => setFilter("album", album.id)}
+            />
+          ))}
+      </div>
+
       {/* Type Filter */}
       <div className="flex gap-2 items-center flex-wrap">
         <span className="text-sm font-medium text-muted-foreground">Type:</span>