{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "case-study-filterable-list",
  "title": "Case Studies — Filterable List",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/case-study-filterable-list/CaseStudyFilterableList.tsx",
      "content": "'use client'\n\nimport { Fragment, useMemo, useState } from 'react'\nimport { ArrowUpRight } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { Separator } from '@/components/ui/separator'\nimport { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group'\n\nconst studies = [\n  {\n    company: 'Northwind Logistics',\n    industry: 'Logistics',\n    result: '5 days off the monthly close',\n    stack: 'Snowflake · dbt · Okta',\n    readTime: '8 min',\n  },\n  {\n    company: 'Halden Health',\n    industry: 'Healthcare',\n    result: '71% fewer ad-hoc data requests',\n    stack: 'BigQuery · Airflow',\n    readTime: '6 min',\n  },\n  {\n    company: 'Verity Retail Group',\n    industry: 'Retail',\n    result: '2.4pp tighter forecast band',\n    stack: 'Redshift · dbt',\n    readTime: '7 min',\n  },\n  {\n    company: 'Calder Manufacturing',\n    industry: 'Manufacturing',\n    result: '11 spreadsheets retired',\n    stack: 'Postgres · Dagster',\n    readTime: '5 min',\n  },\n  {\n    company: 'Ridgeway Freight',\n    industry: 'Logistics',\n    result: 'Per-shipment landed cost',\n    stack: 'Snowflake · Fivetran',\n    readTime: '9 min',\n  },\n  {\n    company: 'Ashford Clinics',\n    industry: 'Healthcare',\n    result: 'PHI-scoped self-serve reporting',\n    stack: 'BigQuery · Entra ID',\n    readTime: '6 min',\n  },\n]\n\nconst ALL = 'All'\nconst industries = [ALL, ...new Set(studies.map((study) => study.industry))]\n\nexport function CaseStudyFilterableList() {\n  const [active, setActive] = useState(ALL)\n  const visible = useMemo(\n    () => (active === ALL ? studies : studies.filter((study) => study.industry === active)),\n    [active],\n  )\n\n  return (\n    <section data-slot=\"case-study-filterable-list\" className=\"bg-background\">\n      <div className=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div className=\"flex flex-wrap items-end justify-between gap-6\">\n          <div>\n            <Badge variant=\"secondary\">Customer stories</Badge>\n            <h2 className=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Read one close to your own</h2>\n          </div>\n\n          <ToggleGroup\n            value={active}\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            className=\"flex-nowrap overflow-x-auto\"\n            aria-label=\"Filter case studies by industry\"\n            // Single-select emits '' when the pressed chip is pressed again;\n            // fall back to ALL so the list is never empty by accident.\n            onValueChange={(value: string) => setActive(value || ALL)}\n          >\n            {industries.map((industry) => (\n              <ToggleGroupItem key={industry} value={industry}>\n                {industry}\n              </ToggleGroupItem>\n            ))}\n          </ToggleGroup>\n        </div>\n\n        <Card className=\"mt-8\">\n          <CardContent className=\"p-2\">\n            {!visible.length ? (\n              <div className=\"px-4 py-16 text-center\">\n                <p className=\"text-sm font-medium\">No stories in that industry yet.</p>\n                <Button variant=\"outline\" size=\"sm\" className=\"mt-4\" onClick={() => setActive(ALL)}>\n                  Show all\n                </Button>\n              </div>\n            ) : (\n              <ul>\n                {visible.map((study, index) => (\n                  <Fragment key={study.company}>\n                    <li>\n                      <a\n                        href=\"#\"\n                        className=\"hover:bg-muted focus-visible:ring-ring group flex items-center gap-4 rounded-lg p-4 transition-colors focus-visible:ring-2 focus-visible:outline-none\"\n                      >\n                        <div className=\"min-w-0 flex-1\">\n                          <div className=\"flex flex-wrap items-center gap-2\">\n                            <p className=\"text-sm font-semibold\">{study.company}</p>\n                            <Badge variant=\"outline\">{study.industry}</Badge>\n                          </div>\n                          <p className=\"mt-1 text-sm\">{study.result}</p>\n                          <p className=\"text-muted-foreground mt-1 font-mono text-xs\">{study.stack}</p>\n                        </div>\n                        <span className=\"text-muted-foreground shrink-0 text-xs\">{study.readTime}</span>\n                        <ArrowUpRight\n                          className=\"text-muted-foreground size-4 shrink-0 transition-transform group-hover:translate-x-0.5 group-hover:-translate-y-0.5\"\n                          aria-hidden=\"true\"\n                        />\n                      </a>\n                    </li>\n                    {index < visible.length - 1 && <Separator />}\n                  </Fragment>\n                ))}\n              </ul>\n            )}\n          </CardContent>\n        </Card>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CaseStudyFilterableList.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/separator.json",
    "https://uipkge.dev/r/react/toggle-group.json"
  ],
  "description": "Filterable index of customer stories with industry chips above rows carrying the headline result, stack, and read time, plus an empty state.",
  "categories": [
    "marketing"
  ],
  "deprecated": true,
  "replacedBy": "case-study"
}