feat(resources): enhance resource retrieval and detail components, add empty state handling

Author: tyronejosee

src/actions/resources.ts

@@ -4,22 +4,47 @@ import type {
   CreateResourceInput,
   UpdateResourceInput,
   Resource,
+  ResourceList,
 } from "@/types";
 
 import { createClient } from "@/lib/supabase/server";
 
-export const getResources = async () => {
+export const getResources = async (): Promise<ResourceList[]> => {
   const supabase = await createClient();
   const { data, error } = await supabase.from("resources").select(`
     id,
     name,
     slug,
     image,
     tags,
-    category:categories (id, name)
+    category:categories (id, name, slug, created_at)
     `);
 
-  if (error) throw error;
+  if (error) throw new Error(error.message);
+  // @ts-ignore - supabase returns an array, but we want to return a single object
+  return data;
+};
+
+export const getResourcesByCategory = async (
+  category: string,
+): Promise<ResourceList[]> => {
+  const supabase = await createClient();
+  const { data, error } = await supabase
+    .from("resources")
+    .select(
+      `
+    id,
+    name,
+    slug,
+    image,
+    tags,
+    category:categories!inner (id, name, slug)
+    `,
+    )
+    .eq("categories.slug", category);
+
+  if (error) throw new Error(error.message);
+  // @ts-ignore - supabase returns an array, but we want to return a single object
   return data;
 };
 

src/app/(public)/resources/[slug]/page.tsx

@@ -1,5 +1,6 @@
 import { notFound } from "next/navigation";
 import { getResourceBySlug } from "@/actions/resources";
+import { ResourceDetail } from "@/components/resources";
 
 type Props = {
   params: { slug: string };
@@ -10,37 +11,5 @@ export default async function ResourceDetailPage({ params }: Props) {
   const resource = await getResourceBySlug(slug);
   if (!resource) return notFound();
 
-  return (
-    <main className="max-w-4xl mx-auto px-4 py-8">
-      <article className="space-y-6">
-        <header className="space-y-4">
-          <h1 className="text-3xl font-bold text-white">{resource.name}</h1>
-          <p className="text-gray-600 text-lg">
-            {resource.description || "No description available."}
-          </p>
-          <div className="flex flex-wrap gap-2">
-            {resource.tags?.map((tag, idx) => (
-              <span
-                key={idx}
-                className="bg-blue-100 text-blue-800 text-sm font-medium px-2.5 py-0.5 rounded"
-              >
-                {tag}
-              </span>
-            ))}
-          </div>
-          <div className="text-sm text-gray-500">
-            <span>{new Date(resource.created_at).toLocaleDateString()}</span>
-          </div>
-        </header>
-
-        {resource.image && (
-          <img
-            src={resource.image}
-            alt={resource.name}
-            className="w-full h-auto rounded-xl shadow-md"
-          />
-        )}
-      </article>
-    </main>
-  );
+  return <ResourceDetail resource={resource} />;
 }

src/app/(public)/resources/categories/[category]/page.tsx

@@ -1,19 +1,32 @@
+import { getResourcesByCategory } from "@/actions/resources";
+import { ResourceList } from "@/components/resources";
+import { EmptyList } from "@/components/layout";
 import { Heading } from "@/components/ui";
 
+export const dynamic = "force-dynamic";
+
 type Props = {
   params: { category: string };
 };
 
 export default async function ResourcesByCategoryPage({ params }: Props) {
   const { category } = await params;
+  const resources = await getResourcesByCategory(category);
+
+  const renderResources = () => {
+    if (resources.length === 0) {
+      return <EmptyList type="resources" />;
+    }
+    return <ResourceList resources={resources} />;
+  };
 
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
+    <main className="max-w-screen-xl mx-auto p-4 flex flex-col gap-4">
       <Heading
         title={category}
         subtitle="Explore all the resources by category"
       />
-      {JSON.stringify(category)}
+      {renderResources()}
     </main>
   );
 }

src/components/resources/index.ts

@@ -1,3 +1,4 @@
 export { default as ResourceCard } from "./resource-card";
+export { default as ResourceDetail } from "./resource-detail";
 export { default as ResourceFilters } from "./resource-filters";
 export { default as ResourceList } from "./resource-list";

src/components/resources/resource-card.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import type { Resource } from "@/types";
+import type { ResourceList } from "@/types";
 
 import Link from "next/link";
 import { Card, CardFooter, Chip, Image } from "@heroui/react";
 
 type Props = {
-  resource: Resource;
+  resource: ResourceList;
 };
 
 export default function ResourceCard({ resource }: Props) {
@@ -20,7 +20,7 @@ export default function ResourceCard({ resource }: Props) {
         >
           <figure className="relative border-2 border-neutral-200 dark:border-neutral-800 rounded-md overflow-hidden">
             <span className="hidden group-hover:block absolute top-2 right-2 bg-neutral-950 dark:bg-white text-neutral-950 px-2 py-1 rounded-lg text-xs z-50">
-              {resource.category.name}
+              {resource.category?.name ?? "Uncategorized"}
             </span>
             <Image
               isBlurred

src/components/resources/resource-detail.tsx

@@ -0,0 +1,187 @@
+"use client";
+
+import type { Resource } from "@/types";
+
+import Link from "next/link";
+import Image from "next/image";
+import { Avatar, Button, Card, Chip } from "@heroui/react";
+import { formatDistanceToNow } from "date-fns";
+import { ArrowUpRight, Clock, Hash } from "lucide-react";
+
+type Props = {
+  resource: Resource;
+};
+
+const comments = [
+  {
+    id: "1",
+    author: {
+      name: "Sarah Miller",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+    content:
+      "This was incredibly helpful for my current project. Thank you for sharing!",
+    date: "April 16, 2023",
+  },
+  {
+    id: "2",
+    author: {
+      name: "David Chen",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+    content:
+      "Great resource. I especially appreciated the section on keyboard navigation patterns.",
+    date: "April 17, 2023",
+  },
+  {
+    id: "3",
+    author: {
+      name: "Emily Rodriguez",
+      avatar: "/placeholder.svg?height=40&width=40",
+    },
+    content:
+      "I've been looking for something like this for weeks. The examples are clear and the explanations are easy to follow.",
+    date: "April 18, 2023",
+  },
+];
+
+export default function ResourceDetail({ resource }: Props) {
+  return (
+    <div className="max-screen-xl mx-auto flex flex-col gap-4">
+      <div className="lg:grid lg:grid-cols-3">
+        {/* Main Content */}
+        <main className="lg:col-span-2 flex flex-col gap-4 p-4">
+          <header className="relative flex flex-col gap-2 border-2 border-neutral-200 dark:border-neutral-800 rounded-lg p-4">
+            <h1 className="text-2xl font-bold tracking-tight text-neutral-950 dark:text-white mb-2">
+              {resource.name}
+            </h1>
+
+            <div className="flex gap-2">
+              {resource.tags.map((tag) => (
+                <Chip
+                  key={tag}
+                  size="sm"
+                  variant="flat"
+                  radius="sm"
+                  startContent={<Hash className="h-4 w-4" />}
+                  className="flex items-center gap-1"
+                >
+                  {tag}
+                </Chip>
+              ))}
+            </div>
+
+            <div className="max-w-xl line-clamp-2">
+              {resource.description && (
+                <p className="text-sm text-neutral-500">
+                  {resource.description}
+                </p>
+              )}
+            </div>
+
+            <div className="absolute top-4 right-4 flex items-center gap-1 text-sm text-neutral-500">
+              <Clock className="h-4 w-4" />
+              <span>
+                {formatDistanceToNow(new Date(resource.created_at), {
+                  addSuffix: true,
+                })}
+              </span>
+            </div>
+
+            <footer className="flex justify-between">
+              <div className="flex gap-4">
+                <div className="flex items-center gap-2 text-sm text-neutral-500">
+                  by{" "}
+                  <span className="text-neutral-950 dark:text-white font-medium">
+                    {comments[0].author.name}
+                  </span>
+                </div>
+              </div>
+              <div className="flex gap-2">
+                <Button
+                  as={Link}
+                  size="sm"
+                  href="#"
+                  variant="light"
+                  aria-label="Add"
+                >
+                  Report
+                </Button>
+                <Button
+                  as={Link}
+                  size="sm"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label="Visit resource"
+                  href={resource.url}
+                  endContent={<ArrowUpRight className="h-4 w-4" />}
+                  className="bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 font-medium"
+                >
+                  Visit resource
+                </Button>
+              </div>
+            </footer>
+          </header>
+
+          {/* Image */}
+          {resource.image && (
+            <figure className="overflow-hidden rounded-xl border-2 border-neutral-200 dark:border-neutral-800">
+              <Image
+                src={resource.image || "/placeholder.svg"}
+                alt={`Image for ${resource.name}`}
+                width={600}
+                height={400}
+                className="h-auto w-full object-cover transition-all hover:scale-105"
+              />
+            </figure>
+          )}
+        </main>
+
+        {/* Comments */}
+        <aside className="lg:border-l-2 border-neutral-200 dark:border-neutral-800 flex flex-col gap-4 p-4">
+          <h2 className="text-2xl font-bold tracking-tight text-neutral-950 dark:text-white mb-2">
+            Comments
+          </h2>
+          <section className="flex flex-col gap-4">
+            {comments.map((comment) => (
+              <Card
+                key={comment.id}
+                className="space-y-3 rounded-lg p-4"
+                classNames={{
+                  base: "bg-white dark:bg-neutral-950 border-2 border-neutral-200 dark:border-neutral-800 shadow-none",
+                }}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Avatar className="h-8 w-8">
+                      <Image
+                        src={comment.author.avatar || "/placeholder.svg"}
+                        alt={comment.author.name}
+                      />
+                      <div>{comment.author.name.charAt(0)}</div>
+                    </Avatar>
+                    <span className="font-medium">{comment.author.name}</span>
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {comment.date}
+                  </span>
+                </div>
+                <p className="text-sm text-neutral-500">{comment.content}</p>
+              </Card>
+            ))}
+          </section>
+          <footer>
+            <Button
+              size="sm"
+              className="w-full"
+              variant="bordered"
+              startContent={<ArrowUpRight className="h-4 w-4" />}
+            >
+              View all comments
+            </Button>
+          </footer>
+        </aside>
+      </div>
+    </div>
+  );
+}

src/components/resources/resource-list.tsx

@@ -1,23 +1,19 @@
 "use client";
 
-import type { Resource } from "@/types";
+import type { ResourceList } from "@/types";
 
 import { ResourceCard } from "@/components/resources";
 
 type Props = {
-  resources: Resource[];
+  resources: ResourceList[];
 };
 
 export default function ResourceList({ resources }: Props) {
   return (
-    <section className="py-8">
-      <div className="container mx-auto px-4">
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {resources.map((resource) => (
-            <ResourceCard key={resource.id} resource={resource} />
-          ))}
-        </div>
-      </div>
+    <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      {resources.map((resource) => (
+        <ResourceCard key={resource.id} resource={resource} />
+      ))}
     </section>
   );
 }