{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "careers-4",
  "title": "Filterable Jobs Board",
  "description": "Filterable jobs board with a search field, department filter pills, a live result count, and a scrollable list of roles with location and type.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge",
    "input",
    "scroll-area"
  ],
  "files": [
    {
      "path": "registry/blocks/careers/4/careers-block.tsx",
      "content": "\"use client\"\n\nimport { useMemo, useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Input } from \"@/components/ui/input\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\ntype Job = {\n  title: string\n  department: string\n  location: string\n  type: string\n}\n\nconst jobs: Job[] = [\n  {\n    title: \"Senior Frontend Engineer\",\n    department: \"Engineering\",\n    location: \"Remote\",\n    type: \"Full-time\",\n  },\n  {\n    title: \"Backend Engineer, Platform\",\n    department: \"Engineering\",\n    location: \"Berlin\",\n    type: \"Full-time\",\n  },\n  {\n    title: \"Product Designer\",\n    department: \"Design\",\n    location: \"Remote\",\n    type: \"Full-time\",\n  },\n  {\n    title: \"Design Systems Lead\",\n    department: \"Design\",\n    location: \"London\",\n    type: \"Full-time\",\n  },\n  {\n    title: \"Growth Marketing Manager\",\n    department: \"Marketing\",\n    location: \"Remote\",\n    type: \"Full-time\",\n  },\n  {\n    title: \"Content Strategist\",\n    department: \"Marketing\",\n    location: \"Remote\",\n    type: \"Contract\",\n  },\n  {\n    title: \"Customer Success Manager\",\n    department: \"Operations\",\n    location: \"New York\",\n    type: \"Full-time\",\n  },\n]\n\nconst departments = [\"All\", \"Engineering\", \"Design\", \"Marketing\", \"Operations\"]\n\nexport default function CareersBlock() {\n  const [query, setQuery] = useState(\"\")\n  const [department, setDepartment] = useState(\"All\")\n\n  const results = useMemo(() => {\n    const q = query.trim().toLowerCase()\n    return jobs.filter((job) => {\n      const matchesQuery =\n        !q ||\n        job.title.toLowerCase().includes(q) ||\n        job.location.toLowerCase().includes(q)\n      const matchesDept = department === \"All\" || job.department === department\n      return matchesQuery && matchesDept\n    })\n  }, [query, department])\n\n  return (\n    <section className=\"w-full bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-3xl\">\n        <div className=\"flex flex-col gap-2\">\n          <p className=\"text-xs font-semibold tracking-widest text-muted-foreground uppercase\">\n            Careers\n          </p>\n          <h1 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Open positions\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">\n            Join us in building tools teams love. {jobs.length} roles open\n            across the company.\n          </p>\n        </div>\n\n        <div className=\"mt-8 flex flex-col gap-4\">\n          <div className=\"relative\">\n            <IconPlaceholder\n              lucide=\"Search\"\n              tabler=\"IconSearch\"\n              hugeicons=\"SearchIcon\"\n              phosphor=\"MagnifyingGlass\"\n              remixicon=\"RiSearchLine\"\n              className=\"pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground\"\n              aria-hidden=\"true\"\n            />\n            <Input\n              type=\"search\"\n              value={query}\n              onChange={(event) => setQuery(event.target.value)}\n              placeholder=\"Search by title or location...\"\n              className=\"pl-8\"\n              aria-label=\"Search jobs\"\n            />\n          </div>\n          <div\n            className=\"flex flex-wrap gap-1.5\"\n            role=\"group\"\n            aria-label=\"Filter by department\"\n          >\n            {departments.map((dept) => (\n              <button\n                key={dept}\n                type=\"button\"\n                aria-pressed={department === dept}\n                onClick={() => setDepartment(dept)}\n                className={cn(\n                  \"rounded-md border px-3 py-1 text-xs font-medium transition-colors\",\n                  department === dept\n                    ? \"border-foreground bg-foreground text-background\"\n                    : \"border-border text-muted-foreground hover:bg-muted/60 hover:text-foreground\"\n                )}\n              >\n                {dept}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        <p\n          className=\"mt-6 text-xs text-muted-foreground\"\n          role=\"status\"\n          aria-live=\"polite\"\n        >\n          <span className=\"font-medium text-foreground tabular-nums\">\n            {results.length}\n          </span>{\" \"}\n          {results.length === 1 ? \"role\" : \"roles\"}\n        </p>\n\n        <ScrollArea className=\"mt-2 h-96 border-y border-border [&_[data-slot=scroll-area-viewport]]:scroll-fade-y\">\n          <ul className=\"flex flex-col divide-y divide-border\">\n            {results.map((job) => (\n              <li key={job.title}>\n                <a\n                  href=\"#\"\n                  className=\"group flex items-center justify-between gap-4 py-4 pr-3\"\n                >\n                  <div className=\"flex min-w-0 flex-col gap-1\">\n                    <span className=\"font-medium\">{job.title}</span>\n                    <span className=\"flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground\">\n                      <span>{job.department}</span>\n                      <span className=\"inline-flex items-center gap-1\">\n                        <IconPlaceholder\n                          lucide=\"MapPin\"\n                          tabler=\"IconMapPin2\"\n                          hugeicons=\"MapPinIcon\"\n                          phosphor=\"MapPin\"\n                          remixicon=\"RiMapPin2Line\"\n                          className=\"size-3.5\"\n                          aria-hidden=\"true\"\n                        />\n                        {job.location}\n                      </span>\n                      <Badge variant=\"secondary\" className=\"font-normal\">\n                        {job.type}\n                      </Badge>\n                    </span>\n                  </div>\n                  <IconPlaceholder\n                    lucide=\"ArrowRight\"\n                    tabler=\"IconArrowRight\"\n                    hugeicons=\"ArrowRightIcon\"\n                    phosphor=\"ArrowRight\"\n                    remixicon=\"RiArrowRightLine\"\n                    className=\"size-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5\"\n                    aria-hidden=\"true\"\n                  />\n                </a>\n              </li>\n            ))}\n            {results.length === 0 && (\n              <li className=\"py-10 text-center text-sm text-muted-foreground\">\n                No roles match your search.\n              </li>\n            )}\n          </ul>\n        </ScrollArea>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/careers-4.tsx"
    }
  ],
  "meta": {
    "height": "762px",
    "tier": "free"
  },
  "categories": [
    "careers"
  ],
  "type": "registry:block"
}