Article

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import { Picture } from "@/components/blog/picture"
5 
6/**
7 * <Article /> — the gymnopédies article card.
8 *
9 * This is the v1 `core/Card` component, brought back as a blog primitive
10 * (the shadcn-flavoured `ui/Card` is intentionally separate). Props, defaults
11 * and text styling match the legacy implementation:
12 *
13 *   - dark teal surface (`bg-card`) with a soft glow shadow
14 *   - 16:9 image header rendered through gymnopédies' <Picture /> so the
15 *     legacy grayscale → hover-reveal animation is preserved
16 *   - serif heading in `--accent` with a gold glow shadow
17 *   - body copy in `--foreground` with a light-blur text shadow
18 *   - optional supplementary `content` paragraph in `--accent` (xs)
19 */
20 
21export type ArticleSize = "xs" | "sm" | "md" | "lg" | "xl"
22 
23export type ArticleProps = {
24  title: string
25  description: string
26  content?: string
27  size?: ArticleSize
28  image?: {
29    src: string
30    alt: string
31    caption?: React.ReactNode
32  }
33  className?: string
34}
35 
36const sizeMaxWidth: Record<ArticleSize, string> = {
37  xs: "max-w-[12rem]", // 192px
38  sm: "max-w-[20rem]", // 320px
39  md: "max-w-[28rem]", // 448px
40  lg: "max-w-[36rem]", // 576px
41  xl: "max-w-[48rem]", // 768px
42}
43 
44export function Article({
45  title,
46  description,
47  content,
48  size = "sm",
49  image,
50  className,
51}: ArticleProps) {
52  return (
53    <article
54      className={cn(
55        "flex w-full flex-col overflow-hidden rounded-lg bg-card shadow-soft-glow",
56        sizeMaxWidth[size],
57        className,
58      )}
59    >
60      {image && (
61        <div className="aspect-[16/9] w-full overflow-hidden">
62          <Picture className="h-full rounded-none bg-card">
63            <Picture.Image
64              src={image.src}
65              alt={image.alt}
66              transition
67              className="h-full rounded-none"
68            />
69            {image.caption ? (
70              <Picture.Caption>{image.caption}</Picture.Caption>
71            ) : null}
72          </Picture>
73        </div>
74      )}
75      <div className="flex flex-col gap-3 p-6">
76        <h3
77          className={cn(
78            "m-0 text-xl font-bold leading-tight text-accent",
79            "[text-shadow:var(--text-shadow-glow)]",
80          )}
81        >
82          {title}
83        </h3>
84        <p
85          className={cn(
86            "m-0 text-base leading-[1.5] text-foreground",
87            "[text-shadow:var(--text-shadow-light-blur)]",
88          )}
89        >
90// … truncated