aderktech-chronark.com-/app/projects/page.tsx

import Link from "next/link";
import React from "react";
import { allProjects } from "contentlayer/generated";
import { Navigation } from "../components/nav";
import { Card } from "./card";

export default function ProjectsPage() {
	const featured = allProjects.find(
		(project) => project.slug === "planetfall",
	)!;
	const top2 = allProjects.find((project) => project.slug === "envshare")!;
	const top3 = allProjects.find((project) => project.slug === "qstash")!;
	const sorted = allProjects
		.filter(
			(project) =>
				project.slug !== featured.slug &&
				project.slug !== top2.slug &&
				project.slug !== top3.slug,
		)
		.sort(
			(a, b) =>
				new Date(b.date ?? Number.POSITIVE_INFINITY).getTime() -
				new Date(a.date ?? Number.POSITIVE_INFINITY).getTime(),
		);

	return (
		<div className="relative">
			<Navigation />
			<div className="px-6 pt-16 mx-auto space-y-8 max-w-7xl lg:px-8 md:space-y-16 md:pt-24 lg:pt-32">
				<div className="max-w-2xl mx-auto lg:mx-0">
					<h2 className="text-3xl font-bold tracking-tight text-zinc-100 sm:text-4xl">
						Projects
					</h2>
					<p className="mt-4 text-zinc-400">
						Some of the projects are from work and some are on my own time.
					</p>
				</div>
				<div className="w-full h-px bg-zinc-800" />

				<div className="grid grid-cols-1 gap-8 mx-auto lg:grid-cols-2 ">
					<article className="w-full max-w-2xl mx-auto lg:mx-0 lg:max-w-lg">
						<div className="text-xs text-zinc-100">
							{featured.date ? (
								<time dateTime={new Date(featured.date).toISOString()}>
									{Intl.DateTimeFormat(undefined, {
										dateStyle: "medium",
									}).format(new Date(featured.date))}
								</time>
							) : (
								<span>SOON</span>
							)}
						</div>
						<h2
							id="featured-post"
							className="mt-4 text-3xl font-bold tracking-tight text-zinc-100 group-hover:text-white sm:text-4xl font-display"
						>
							{featured.title}
						</h2>
						<p className="mt-4 leading-8 duration-150 text-zinc-400 group-hover:text-zinc-300">
							{featured.description}
						</p>
						<div className="mt-4">
							<Link
								className="text-zinc-200 hover:text-zinc-50"
								href={`/projects/${featured.slug}`}
							>
								Read more <span aria-hidden="true">&rarr;</span>
							</Link>
						</div>
					</article>
					<div className="flex flex-col w-full max-w-2xl gap-8 pt-12 mx-auto border-t border-gray-900/10 sm:pt-16 lg:mx-0 lg:max-w-none lg:border-t-0 lg:pt-0">
						{[top2, top3].map((project) => (
							<Card key={project.slug} project={project} />
						))}
					</div>
				</div>
				<div className="hidden w-full h-px md:block bg-zinc-800" />

				<div className="grid max-w-2xl grid-cols-1 gap-4 mx-auto lg:mx-0 lg:max-w-none md:grid-cols-2 lg:grid-cols-3">
					<div className="grid grid-cols-1 gap-4">
						{sorted
							.filter((_, i) => i % 3 === 0)
							.map((project) => (
								<Card key={project.slug} project={project} />
							))}
					</div>
					<div className="grid grid-cols-1 gap-4">
						{sorted
							.filter((_, i) => i % 3 === 1)
							.map((project) => (
								<Card key={project.slug} project={project} />
							))}
					</div>
					<div className="grid grid-cols-1 gap-4">
						{sorted
							.filter((_, i) => i % 3 === 2)
							.map((project) => (
								<Card key={project.slug} project={project} />
							))}
					</div>
				</div>
			</div>
		</div>
	);
}