feat(pages, resources): enhance resource detail page with improved layout and error handling, add new category resources page

Author: tyronejosee

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

@@ -1,3 +1,4 @@
+import { notFound } from "next/navigation";
 import { getResourceBySlug } from "@/actions/resources";
 
 type Props = {
@@ -7,14 +8,39 @@ type Props = {
 export default async function ResourceDetailPage({ params }: Props) {
   const { slug } = await params;
   const resource = await getResourceBySlug(slug);
+  if (!resource) return notFound();
+
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
-      <h1>{resource.title}</h1>
-      <p>{resource.description}</p>
-      <p>{resource.tags.join(", ")}</p>
-      <p>{resource.author.name}</p>
-      <p>{resource.created_at}</p>
-      <img src={resource.image} alt={resource.title} />
+    <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>
   );
 }

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

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

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

@@ -2,19 +2,21 @@ import type { Metadata } from "next";
 
 import { getResources } from "@/actions/resources";
 import { ResourceList } from "@/components/resources";
+import { Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
 
 export const metadata: Metadata = {
   title: `Resources - ${PROJECT_NAME}`,
-  description: "Resources page",
+  description: "Explore all the resources",
 };
 
 export default async function ResourcesPage() {
   const resources = await getResources();
+  if (resources.length === 0) return <div>No resources found</div>;
 
   return (
     <main className="max-w-screen-xl mx-auto p-4">
-      <h1>Resources</h1>
+      <Heading title="Resources" subtitle="Explore all the resources" />
       <ResourceList resources={resources} />
     </main>
   );

src/app/layout.tsx

@@ -3,11 +3,12 @@ import type { Metadata, Viewport } from "next";
 import { Outfit, Roboto_Mono } from "next/font/google";
 import { Navbar, Sidebar } from "@/components/layout";
 import { BackToTop } from "@/components/ui";
-import { ResourceFilters } from "@/components/resources";
+// import { ResourceFilters } from "@/components/resources";
 import { PROJECT_NAME, PROJECT_DESCRIPTION } from "@/config/constants";
 import Providers from "./providers";
 
 import "../styles/globals.css";
+import { getCategories } from "@/actions/categories";
 
 const outfit = Outfit({
   variable: "--font-outfit",
@@ -37,16 +38,18 @@ type Props = {
   children: Readonly<React.ReactNode>;
 };
 
-export default function RootLayout({ children }: Props) {
+export default async function RootLayout({ children }: Props) {
+  const categories = await getCategories();
+
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={`${outfit.variable} ${robotoMono.variable} antialiased`}>
         <Providers>
           <div className="relative mx-auto max-w-screen-2xl md:flex md:flex-row bg-white dark:bg-neutral-950">
-            <Sidebar />
+            <Sidebar categories={categories} />
             <div className="w-full">
               <Navbar />
-              <ResourceFilters />
+              {/* <ResourceFilters /> */}
               {children}
             </div>
             <BackToTop />