{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "newsletter-split-preview",
  "title": "Newsletter — Split with Preview",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/newsletter-split-preview/NewsletterSplitPreview.tsx",
      "content": "'use client'\n\nimport { useState, type FormEvent } from 'react'\nimport { Check, Mail } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Separator } from '@/components/ui/separator'\n\nconst lastIssue = {\n  subject: 'Why we version metric definitions instead of dashboards',\n  date: 'Feb 18, 2026',\n  readTime: '9 min',\n  opening:\n    'Dashboards are the output. The definition is the thing teams argue about, so that is what belongs under review — with a diff, an owner, and a revert path. This issue walks through what changed when we moved ours into the repo.',\n}\n\nexport function NewsletterSplitPreview() {\n  const [email, setEmail] = useState('')\n  const [submitted, setSubmitted] = useState(false)\n\n  function subscribe(event: FormEvent) {\n    event.preventDefault()\n    if (!email.trim()) return\n    setSubmitted(true)\n  }\n\n  return (\n    <section data-slot=\"newsletter-split-preview\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-6xl px-6 py-20 lg:py-28\">\n        <div className=\"grid items-center gap-10 lg:grid-cols-2 lg:gap-16\">\n          <div>\n            <Badge variant=\"secondary\" className=\"gap-1.5\">\n              <Mail className=\"size-3\" aria-hidden=\"true\" />\n              Monthly\n            </Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight text-balance sm:text-4xl\">\n              Notes from the people who build it\n            </h2>\n            <p className=\"text-muted-foreground mt-3 text-lg\">\n              One email a month on metric modelling, access control, and warehouse cost. No product announcements.\n            </p>\n\n            <form className=\"mt-6 max-w-md\" onSubmit={subscribe}>\n              <div className=\"flex gap-2\">\n                <Input\n                  value={email}\n                  onChange={(event) => setEmail(event.target.value)}\n                  type=\"email\"\n                  required\n                  placeholder=\"you@company.com\"\n                  autoComplete=\"email\"\n                  aria-label=\"Email address\"\n                />\n                <Button type=\"submit\" className=\"shrink-0\">\n                  Subscribe\n                </Button>\n              </div>\n              <p className=\"mt-2 min-h-5 text-xs\" aria-live=\"polite\">\n                {submitted ? (\n                  <span className=\"text-success inline-flex items-center gap-1.5\">\n                    <Check className=\"size-3\" aria-hidden=\"true\" />\n                    Check your inbox to confirm.\n                  </span>\n                ) : (\n                  <span className=\"text-muted-foreground\">8,400 subscribers · unsubscribe in one click.</span>\n                )}\n              </p>\n            </form>\n          </div>\n\n          {/* Showing the last issue is the point: nobody should have to subscribe\n              to find out what they are subscribing to. */}\n          <Card>\n            <CardContent className=\"p-6\">\n              <div className=\"flex flex-wrap items-center gap-3\">\n                <Badge variant=\"outline\">Last issue</Badge>\n                <span className=\"text-muted-foreground text-xs\">\n                  {lastIssue.date} · {lastIssue.readTime}\n                </span>\n              </div>\n\n              <h3 className=\"mt-4 text-lg leading-snug font-semibold tracking-tight text-balance\">\n                {lastIssue.subject}\n              </h3>\n\n              <Separator className=\"my-4\" />\n\n              <p className=\"text-muted-foreground text-sm leading-relaxed\">{lastIssue.opening}</p>\n\n              <Button variant=\"link\" className=\"mt-4 h-auto p-0 text-sm\">\n                Read the full issue\n              </Button>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/NewsletterSplitPreview.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/separator.json"
  ],
  "description": "Signup section pairing the pitch and form with a preview of the last issue — subject line, date, and opening paragraph — so the reader sees what they are subscribing to.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "newsletter"
}