89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { resources } from '@/data/resources';
|
|
import { notFound } from 'next/navigation';
|
|
import SafeImage from '@/components/SafeImage';
|
|
import styles from '../resources.module.css';
|
|
import Link from 'next/link';
|
|
|
|
interface PageProps {
|
|
params: Promise<{ slug: string }>;
|
|
}
|
|
|
|
export async function generateStaticParams() {
|
|
return resources.map((resource) => ({
|
|
slug: resource.slug,
|
|
}));
|
|
}
|
|
|
|
export async function generateMetadata(props: PageProps) {
|
|
const params = await props.params;
|
|
const resource = resources.find((r) => r.slug === params.slug);
|
|
if (!resource) return { title: 'Resource Not Found' };
|
|
|
|
return {
|
|
title: `${resource.title} - SocialBuddy Resources`,
|
|
description: resource.excerpt,
|
|
};
|
|
}
|
|
|
|
export default async function ResourceDetailPage(props: PageProps) {
|
|
const params = await props.params;
|
|
|
|
if (!params?.slug) {
|
|
notFound();
|
|
}
|
|
|
|
const resource = resources.find((r) => r.slug === params.slug);
|
|
|
|
if (!resource) {
|
|
notFound();
|
|
}
|
|
|
|
return (
|
|
<article className={styles.detailPage}>
|
|
{/* Standardized Hero/Banner Section */}
|
|
<section
|
|
className={styles.hero}
|
|
style={resource.bannerImage ? { backgroundImage: `url('${resource.bannerImage}')` } : undefined}
|
|
>
|
|
<div className={styles.container}>
|
|
<div className={styles.heroContent}>
|
|
<h1 className={styles.heroTitle}>{resource.title}</h1>
|
|
<div className={styles.breadcrumbs}>
|
|
<Link href="/">Home</Link> <span>/</span> <Link href="/resources">Resources</Link> <span>/</span> {resource.title}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Featured Image */}
|
|
<div className={styles.container}>
|
|
<div className={styles.detailImageWrapper}>
|
|
<SafeImage
|
|
src={resource.bigImage}
|
|
alt={resource.title}
|
|
className={styles.image}
|
|
style={{ width: '100%', height: 'auto', display: 'block' }}
|
|
fallbackSrc={`https://placehold.co/1200x600/png?text=${encodeURIComponent(resource.title)}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Body */}
|
|
{/* Content Body */}
|
|
<div className={styles.container}>
|
|
<div
|
|
className={styles.detailContent}
|
|
dangerouslySetInnerHTML={{ __html: resource.content }}
|
|
/>
|
|
</div>
|
|
|
|
{/* Back to Resources */}
|
|
<div style={{ textAlign: 'center', paddingBottom: '4rem' }}>
|
|
<Link href="/resources" className="btn btn-primary">
|
|
View All Resources
|
|
</Link>
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|