Mathew
9b6638eb00
Deploy / deploy (push) Successful in 1m13s
Deux courbes partagées dans lib/motion.ts, pour que le CSS et Framer aient le même feeling, et quatre primitives que Tailwind ne sait pas exprimer : reflet de bouton, halo qui suit le curseur, soulignement qui se dessine, secousse d'erreur. Nouveaux composants : Stagger (les collections se distribuent une par une), Spotlight (trouve son parent tout seul, donc les cartes restent des composants serveur), ScrollProgress, BackToTop, Parallax, Spinner, CheckMark. Reveal accepte maintenant une direction. Côté rendu : le trait de nav glisse d'un onglet à l'autre, les cartes se soulèvent, le hero réagit au scroll, les piliers entrent en zig-zag, la lightbox glisse dans le sens demandé et les formulaires répondent. prefers-reduced-motion est respecté partout : Framer coupe via useReducedMotion, le CSS via la media query déjà en place. Le commit embarque aussi la réorganisation des composants par domaine qui était en cours dans l'arbre de travail — les deux étaient trop imbriquées pour être séparées proprement. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import { Spotlight } from "../ui/Spotlight";
|
|
import { formatDate } from "@/lib/format";
|
|
import type { DevblogPost } from "@/lib/devblog";
|
|
|
|
type Props = {
|
|
post: DevblogPost;
|
|
/** Small label above the date. */
|
|
eyebrow?: string;
|
|
/** Heading level, so the panel fits the page outline. */
|
|
as?: "h2" | "h3";
|
|
};
|
|
|
|
/**
|
|
* A single post given real weight, as opposed to a row in `PostList`.
|
|
*
|
|
* Used by the home page and at the top of the devblog index: a list of one is
|
|
* indistinguishable from an empty section, and even with twenty posts the most
|
|
* recent one deserves more than the same 8rem row as the rest.
|
|
*/
|
|
export function PostFeature({ post, eyebrow = "Latest", as: Tag = "h3" }: Props) {
|
|
return (
|
|
<Link
|
|
href={`/devblog/${post.slug}`}
|
|
className="group relative flex h-full flex-col overflow-hidden rounded-2xl border border-border bg-surface p-8 transition duration-300 ease-out hover:-translate-y-1 hover:border-accent/60 hover:shadow-[0_24px_50px_-30px_rgba(0,0,0,0.9)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent lg:p-10"
|
|
>
|
|
<div className="flex items-center gap-4 text-[0.65rem] uppercase tracking-[0.2em] text-foreground-muted">
|
|
<span className="text-accent">{eyebrow}</span>
|
|
<time dateTime={post.date}>{formatDate(post.date)}</time>
|
|
</div>
|
|
|
|
<Tag className="mt-5 font-display text-3xl leading-[1.05] tracking-wider transition-colors duration-300 group-hover:text-accent sm:text-4xl">
|
|
{post.title.toUpperCase()}
|
|
</Tag>
|
|
|
|
{post.excerpt && (
|
|
<p className="mt-4 leading-relaxed text-foreground-muted">
|
|
{post.excerpt}
|
|
</p>
|
|
)}
|
|
|
|
<span className="mt-8 inline-flex items-center gap-2 font-display text-sm tracking-widest text-accent">
|
|
READ THE POST
|
|
<span
|
|
aria-hidden
|
|
className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1"
|
|
>
|
|
→
|
|
</span>
|
|
</span>
|
|
|
|
<Spotlight />
|
|
</Link>
|
|
);
|
|
}
|