OG Workspace

1"use client"
2 
3import { OgLivePreview, type OgStyleKey } from "./og-live-preview"
4 
5/**
6 * Lightweight OG workspace shell. Wire CONTENT.endpoint in your host app
7 * for real image generation (Host API).
8 */
9const CONTENT = {
10  endpoint: "/api/generate",
11  title: "Ship the product this week",
12  subtitle: "Fixed scope. Fixed price.",
13  styleKey: "paperQuote" as OgStyleKey,
14}
15 
16export function OgWorkspace() {
17  return (
18    <div className="space-y-4 rounded-2xl border border-border-subtle bg-card/40 p-4 sm:p-6">
19      <div>
20        <p className="ms-stamp">OG workspace</p>
21        <p className="mt-2 text-sm text-muted-foreground">
22          Preview is CSS-only. Point{" "}
23          <code className="font-mono text-[12px] text-foreground">
24            CONTENT.endpoint
25          </code>{" "}
26          at your generator API to export PNGs.
27        </p>
28      </div>
29      <div className="relative aspect-[1200/630] overflow-hidden rounded-xl border border-border-subtle">
30        <OgLivePreview
31          title={CONTENT.title}
32          subtitle={CONTENT.subtitle}
33          styleKey={CONTENT.styleKey}
34        />
35      </div>
36    </div>
37  )
38}