feat(categories): add category-list component and page for categories

Author: tyronejosee

src/app/(public)/resources/categories/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+
+import { Heading } from "@/components/ui";
+import { PROJECT_NAME } from "@/config/constants";
+import { CategoryList } from "@/components/categories";
+
+export const metadata: Metadata = {
+  title: `Categories - ${PROJECT_NAME}`,
+  description: "All categories in one place",
+};
+
+export default async function CategoriesPage() {
+  return (
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
+      <Heading title="Categories" subtitle="All categories in one place" />
+      <CategoryList />
+    </main>
+  );
+}

src/components/categories/category-list.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import { Card, CardHeader } from "@heroui/react";
+import { formatDistanceToNow } from "date-fns";
+import { Folder, Timer } from "lucide-react";
+import { useCategoryStore } from "@/stores/categories";
+import { capitalize } from "@/lib/utils";
+import type { Category } from "@/types";
+
+export default function CategoryList() {
+  const categories = useCategoryStore((state) => state.categories);
+
+  return (
+    <section className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+      {categories.map((category) => (
+        <CategoryCard key={category.id} category={category} />
+      ))}
+    </section>
+  );
+}
+
+function CategoryCard({ category }: { category: Category }) {
+  return (
+    <article className="group">
+      <Link href={`/resources/categories/${category.slug}`}>
+        <Card className="bg-white dark:bg-neutral-950 !outline-none shadow-none rounded-xl border-2 border-neutral-200 dark:border-neutral-800 group-hover:border-neutral-300 dark:group-hover:border-neutral-700">
+          <CardHeader className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Folder className="w-5 h-5 text-neutral-950 dark:text-white" />
+              <span className="text-sm font-medium text-neutral-950 dark:text-white">
+                {capitalize(category.name)}
+              </span>
+            </div>
+            <div className="flex justify-end items-center gap-2 text-xs text-neutral-500">
+              <Timer size={16} />
+              {formatDistanceToNow(new Date(category.created_at), {
+                addSuffix: true,
+              })}
+            </div>
+          </CardHeader>
+        </Card>
+      </Link>
+    </article>
+  );
+}

src/components/categories/index.ts

@@ -1 +1,2 @@
 export { default as CategoryDrawer } from "./category-drawer";
+export { default as CategoryList } from "./category-list";