page.tsx

1import { getContent, sortContentByDate } from '@/lib/content'
2import { generateMeta } from '@/lib/generateMeta'
3import { GuideLayout } from '@/components/guide-layout'
4import { Link } from 'nextjs13-progress'
5
6export function generateMetadata() {
7	return generateMeta({
8		title: 'Guides',
9		path: '/guides',
10	})
11}
12
13export default function GuidesPage() {
14	const guides = sortContentByDate(getContent('guides'))
15
16	return (
17		<GuideLayout guides={guides}>
18			<div className="prose prose-invert">
19				<h1>Guides</h1>
20				<p>
21					Welcome to the guides section. Choose a guide from the sidebar to get
22					started.
23				</p>
24
25				{/* Optional: Featured guides or categories */}
26				<div className="mt-8 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
27					{guides
28						.filter((guide) => guide.metadata.featured)
29						.map((guide) => (
30							<div
31								key={guide.slug}
32								className="rounded-xl border border-gray-800 bg-gray-900/50 p-6 transition-all hover:border-purple-500/50"
33							>
34								<h3 className="mb-2 text-xl font-semibold">
35									<Link
36										href={`/guides/${guide.slug}`}
37										className="text-purple-400 hover:text-purple-300"
38									>
39										{guide.metadata.title}
40									</Link>
41								</h3>
42								{guide.metadata.description && (
43									<p className="text-sm text-gray-400">
44										{guide.metadata.description}
45									</p>
46								)}
47							</div>
48						))}
49				</div>
50			</div>
51		</GuideLayout>
52	)
53}
54