feat: add tag filtering to resources index page

Author: Devatva24

src/app/resources/[[...slug]]/ResourceIndex.client.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import type { MdxFile } from '@/util/loadMdx.server';
+
+type Props = {
+	resources: MdxFile[];
+};
+
+export default function ResourceIndex({ resources }: Props) {
+	const [selectedTag, setSelectedTag] = useState<string | null>(null);
+
+	// Collect all unique tags
+	const allTags = Array.from(
+		new Set(resources.flatMap((r) => r.meta?.tags ?? [])),
+	).sort();
+
+	// Filter logic
+	const filteredResources = selectedTag
+		? resources.filter((r) => r.meta?.tags?.includes(selectedTag))
+		: resources;
+
+	return (
+		<div className="container py-6">
+			{/* Tag filter */}
+			{allTags.length > 0 && (
+				<div className="mb-6 flex flex-wrap gap-2">
+					<button
+						onClick={() => setSelectedTag(null)}
+						className={`btn btn-sm ${
+							selectedTag === null ? 'btn-primary' : 'btn-outline'
+						}`}
+					>
+						All
+					</button>
+
+					{allTags.map((tag) => (
+						<button
+							key={tag}
+							onClick={() => setSelectedTag(tag)}
+							aria-pressed={selectedTag === tag}
+							className={`btn btn-sm ${
+								selectedTag === tag ? 'btn-primary' : 'btn-outline'
+							}`}
+						>
+							{tag}
+						</button>
+					))}
+				</div>
+			)}
+
+			{/* Resource list */}
+			{filteredResources.length === 0 ? (
+				<p>No resources found for this tag.</p>
+			) : (
+				<ul className="grid gap-4">
+					{filteredResources.map((file) => (
+						<li key={file.slug}>
+							<Link
+								href={`/${file.slug.replace('content/', '')}`}
+								className="text-lg font-semibold underline"
+							>
+								{file.meta.title}
+							</Link>
+
+							{file.meta.description && (
+								<p className="text-muted">{file.meta.description}</p>
+							)}
+						</li>
+					))}
+				</ul>
+			)}
+		</div>
+	);
+}

src/app/resources/[[...slug]]/page.tsx

@@ -1,4 +1,5 @@
 import DefaultLayout from '@/components/layouts/DefaultLayout';
+import ResourceIndex from '@/app/resources/[[...slug]]/ResourceIndex.client';
 import { createMetaData } from '@/util/createMetaData.server';
 import {
 	loadMdxDirectory,
@@ -108,15 +109,31 @@ export default async function Page({
 	params,
 }: NextPageProps<'slug', false, true>) {
 	const uri = ((await params).slug ?? []).join('/');
+
+	// ✅ Load all resources first
+	const allFiles = await loadMdxDirectory({
+		baseDirectory: 'content/resources',
+	});
+
+	// ✅ INDEX PAGE (/resources)
+	if (!uri) {
+		return (
+			<DefaultLayout
+				heroHeader="Resources"
+				heroSubheader="A collection of resources for the Virtual Coffee community"
+			>
+				<ResourceIndex resources={allFiles} />
+			</DefaultLayout>
+		);
+	}
+
+	// ✅ INDIVIDUAL RESOURCE PAGE
 	const file = await getFile(uri);
 
 	if (!file) {
 		notFound();
 	}
 
-	const allFiles = await loadMdxDirectory({
-		baseDirectory: 'content/resources',
-	});
 	const breadCrumbs = findBreadcrumbs(allFiles, 'resources/' + uri);
 
 	return (