import type { ReactNode } from "react";
import type { Illust, Tint } from "@/lib/blog/types";
import styles from "./blog.module.css";
// Translucent white strokes/fills from the design's illustration library.
const W1 = "rgba(255,255,255,0.22)";
const W2 = "rgba(255,255,255,0.5)";
const W3 = "rgba(255,255,255,0.85)";
/**
* Shared gradient defs for the illustrations (design's `#ibrand`). No
* gradientUnits → objectBoundingBox, so it scales to each shape regardless of
* viewBox. Render once per page.
*/
export function BlogGradientDefs() {
return (
);
}
// viewBox 0 0 120 90 — ported verbatim from the design's ILL library.
const ILL: Record = {
chevron: (
),
layers: (
),
bars: (
),
orbit: (
),
search: (
),
network: (
),
grid: (
),
spark: (
),
terminal: (
),
};
/**
* Decorative article thumbnail — tinted gradient panel + brand illustration.
* `variant` swaps between the standard card thumb and the dark video thumb.
*/
export function BlogThumb({
illust,
tint,
badge,
className,
children,
}: {
illust: Illust;
tint: Tint;
badge?: string;
className?: string;
children?: ReactNode;
}) {
return (
{badge ? {badge} : null}
{children}
);
}