OG Live Preview

1/**
2 * CSS-only OG card preview. Edit CONTENT.presets or pass props.
3 */
4 
5/** Edit CONTENT for default title/subtitle/style. */
6const CONTENT = {
7  title: "Ship the product this week",
8  subtitle: "Fixed scope. Fixed price.",
9  styleKey: "paperQuote" as const,
10  presets: {
11    paperQuote: {
12      previewGradient:
13        "linear-gradient(145deg, #0a0a0a 0%, #111827 45%, #0b7bff22 100%)",
14      safeZone: "lowerThird" as const,
15      palette: { title: "#fafafa", subtitle: "#a3a3a3" },
16      typography: { titleSizeMax: 72, subtitleSizeMax: 28, titleWeight: 700 },
17    },
18    boldSplit: {
19      previewGradient:
20        "linear-gradient(90deg, #0b7bff 0%, #0b7bff 42%, #0a0a0a 42%)",
21      safeZone: "center" as const,
22      palette: { title: "#fafafa", subtitle: "#e5e5e5" },
23      typography: { titleSizeMax: 64, subtitleSizeMax: 24, titleWeight: 700 },
24    },
25  },
26}
27 
28export type OgStyleKey = keyof typeof CONTENT.presets
29 
30export function OgLivePreview({
31  title = CONTENT.title,
32  subtitle = CONTENT.subtitle,
33  styleKey = CONTENT.styleKey,
34}: {
35  title?: string
36  subtitle?: string
37  styleKey?: OgStyleKey
38}) {
39  const preset = CONTENT.presets[styleKey] ?? CONTENT.presets.paperQuote
40  const zone = preset.safeZone
41 
42  const alignItems = zone === "center" ? "center" : "flex-start"
43  const justifyContent = zone === "lowerThird" ? "flex-end" : "center"
44  const textAlign = zone === "center" ? "center" : "left"
45 
46  const titleVW = `${Math.round((preset.typography.titleSizeMax / 1200) * 100)}cqi`
47  const subVW = `${Math.round((preset.typography.subtitleSizeMax / 1200) * 100)}cqi`
48 
49  return (
50    <div
51      aria-hidden
52      className="@container absolute inset-0 flex"
53      style={{ background: preset.previewGradient }}
54    >
55      <div
56        className="flex w-full flex-col"
57        style={{
58          padding: `${(60 / 630) * 100}% ${(80 / 1200) * 100}%`,
59          alignItems,
60          justifyContent,
61          textAlign,
62        }}
63      >
64        <div
65          className="flex w-full flex-col"
66          style={{
67            alignItems: zone === "center" ? "center" : "flex-start",
68            maxWidth: zone === "center" ? "80%" : "73%",
69          }}
70        >
71          <div
72            style={{
73              color: preset.palette.title,
74              fontFamily:
75                "var(--font-outfit), var(--font-fraunces), system-ui, sans-serif",
76              fontWeight: preset.typography.titleWeight,
77              fontSize: titleVW,
78              lineHeight: 1.04,
79// … truncated