OG Examples

1"use client"
2 
3import Link from "next/link"
4 
5import { OgLivePreview, type OgStyleKey } from "./og-live-preview"
6import { cn } from "@/lib/utils"
7 
8/** Edit CONTENT for demo cards shown in the gallery. */
9const CONTENT = {
10  examples: [
11    {
12      title: "Ship this week",
13      subtitle: "Fixed-scope MVP",
14      styleKey: "paperQuote" as OgStyleKey,
15      href: "/og",
16    },
17    {
18      title: "Own the UI",
19      subtitle: "shadcn registry",
20      styleKey: "boldSplit" as OgStyleKey,
21      href: "/docs/registry",
22    },
23  ],
24}
25 
26export function OgExamples({
27  preview = false,
28  className,
29}: {
30  preview?: boolean
31  className?: string
32}) {
33  return (
34    <div className={cn("grid gap-4 sm:grid-cols-2", className)}>
35      {CONTENT.examples.map((ex) => (
36        <Link
37          key={ex.title}
38          href={ex.href}
39          className="group relative aspect-1200/630 overflow-hidden rounded-2xl border border-border-subtle"
40        >
41          <OgLivePreview
42            title={ex.title}
43            subtitle={ex.subtitle}
44            styleKey={ex.styleKey}
45          />
46          {!preview ? (
47            <span className="absolute right-3 bottom-3 rounded-md border border-white/20 bg-black/50 px-2.5 py-1 text-[11px] text-white backdrop-blur-sm">
48              Open
49            </span>
50          ) : null}
51        </Link>
52      ))}
53    </div>
54  )
55}