Unified SEO and Open Graph editor component that combines meta fields, OG image upload, and a live preview panel into a single composable UI block. Designed for reuse across blog posts, case studies, and product releases. ## Key Components ### `OGEditorPreview` The primary exported function component. Renders a card-style panel containing: - **SEO Title** and **SEO Keywords** inputs (side-by-side on large screens) - **SEO Description** textarea and **OG Image** upload slot (side-by-side on large screens) - **OG Preview** section rendered below a divider ### `OGEditorPreviewProps` Interface defining all accepted props: | Prop | Type | Description | |---|---|---| | `seoTitle` | `string` | Controlled SEO title value | | `seoDescription` | `string` | Controlled meta description value | | `seoKeywords` | `string` | Controlled keywords value | | `ogImageUrl` | `string` | Current OG image URL | | `title` / `summary` / `featuredImage` | `string` | Auto-populate sources from parent content | | `categories` | `Array<{name, slug}>` | Optional category list for auto-population | | `OGImageUploadComponent` | `React.ReactNode` | Upload UI injected from parent | | `OGPreviewComponent` | `React.ReactNode` | Preview UI injected from parent | | `disabled` | `boolean` | Disables all inputs (default: `false`) | | `className` | `string` | Additional CSS classes | ## Usage Example ```typescript import { OGEditorPreview } from './og-editor-preview'; setForm({ ...form, seoTitle: v })} onSeoDescriptionChange={(v) => setForm({ ...form, seoDescription: v })} onSeoKeywordsChange={(v) => setForm({ ...form, seoKeywords: v })} onOgImageUrlChange={(v) => setForm({ ...form, ogImageUrl: v })} OGImageUploadComponent={} OGPreviewComponent={} /> ``` > **Note:** `OGImageUploadComponent` and `OGPreviewComponent` are injected as render props (`React.ReactNode`), keeping upload and preview logic decoupled from this component. `ogImageUrl` and `onOgImageUrlChange` are declared in the interface but not consumed internally — they are intended for use by the injected child components via the parent's closure. **Source:** [`og-editor-preview.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/og-editor-preview.tsx)