59 lines
2.6 KiB
TypeScript
59 lines
2.6 KiB
TypeScript
import Link from "next/link";
|
|
import type { ProjectType } from "@prisma/client";
|
|
import type { Locale } from "@/lib/i18n";
|
|
import { getProjectDirectoryCopy, getProjectPath } from "@/lib/project-content";
|
|
import { getProjectCategories, getPublishedProjects } from "@/lib/project-queries";
|
|
import ProjectCard from "@/components/public/project-card";
|
|
|
|
type ProjectDirectoryProps = {
|
|
locale: Locale;
|
|
type: ProjectType;
|
|
categorySlug?: string;
|
|
};
|
|
|
|
export default async function ProjectDirectory({ locale, type, categorySlug }: ProjectDirectoryProps) {
|
|
const [projects, categories] = await Promise.all([getPublishedProjects(type, categorySlug), getProjectCategories()]);
|
|
const copy = getProjectDirectoryCopy(locale, type);
|
|
const allHref = getProjectPath(locale, type);
|
|
|
|
return (
|
|
<section className="mx-auto w-full max-w-6xl space-y-8 px-4 py-10 sm:px-6 lg:px-8">
|
|
<header className="max-w-3xl space-y-3">
|
|
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-brand-2">{copy.eyebrow}</p>
|
|
<h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">{copy.title}</h1>
|
|
<p className="text-lg leading-8 text-muted-foreground">{copy.description}</p>
|
|
</header>
|
|
|
|
{categories.length > 0 ? (
|
|
<nav aria-label={locale === "ar" ? "فلترة التصنيفات" : "Filter by category"} className="flex flex-wrap gap-2">
|
|
<Link
|
|
href={allHref}
|
|
className={!categorySlug ? "rounded-full bg-primary px-4 py-2 text-sm text-primary-foreground" : "rounded-full border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"}
|
|
>
|
|
{locale === "ar" ? "الكل" : "All"}
|
|
</Link>
|
|
{categories.map((category) => (
|
|
<Link
|
|
key={category.id}
|
|
href={`${allHref}?category=${category.slug}`}
|
|
className={categorySlug === category.slug ? "rounded-full bg-primary px-4 py-2 text-sm text-primary-foreground" : "rounded-full border border-border px-4 py-2 text-sm text-muted-foreground hover:bg-accent"}
|
|
>
|
|
{locale === "ar" ? category.nameAr : category.nameEn}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
) : null}
|
|
|
|
{projects.length === 0 ? (
|
|
<div className="rounded-xl border border-dashed border-border bg-card p-10 text-center text-muted-foreground">{copy.empty}</div>
|
|
) : (
|
|
<div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
|
|
{projects.map((project) => (
|
|
<ProjectCard key={project.id} locale={locale} type={type} project={project} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
);
|
|
}
|