{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "workspace-header-01",
  "type": "registry:block",
  "title": "Workspace Header",
  "description": "A responsive tool workspace heading with project context, status, and a primary creation action.",
  "author": "UIBlocks contributors",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react@0.577.0"
  ],
  "files": [
    {
      "path": "licenses/workspace-header-01/LICENSE.txt",
      "type": "registry:file",
      "target": "@components/uiblocks/workspace-header-01/LICENSE.txt",
      "content": "UIBlocks original block: Copyright (c) 2026 UIBlocks contributors. Licensed under the MIT License below.\n\nIncludes source from Blocks.so and its bundled primitives.\nSource: https://github.com/ephraimduncan/blocks\nRevision: 3f759d5171c2391253ec4c772e9e5b3db2bc7c7f\n\nMIT License\n\nCopyright (c) 2025 Ephraim Duncan\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
    },
    {
      "path": "content/components/workspace/workspace-header-01.tsx",
      "type": "registry:component",
      "target": "@components/uiblocks/workspace-header-01/workspace-header-01.tsx",
      "content": "\"use client\";\n\nimport {\n  ArrowLeft,\n  ArrowUpRight,\n  Command,\n  Layers2,\n  Search,\n} from \"lucide-react\";\nimport { useState } from \"react\";\n\nexport type WorkspaceHeader01Props = {\n  productName?: string;\n  title?: string;\n  description?: string;\n  websiteHref?: string;\n  searchQuery?: string;\n  onSearch?: (query: string) => void;\n};\n\n/** A compact workspace masthead with an accessible, functional file search. */\nexport default function WorkspaceHeader01({\n  productName = \"Frame\",\n  title = \"A little less waiting. A lot more creating.\",\n  description = \"Prepare your next video, keep every task in view, and pick up where you left off.\",\n  websiteHref = \"/preview/recipes/tool-landing\",\n  searchQuery,\n  onSearch,\n}: WorkspaceHeader01Props = {}) {\n  const [query, setQuery] = useState(\"\");\n\n  return (\n    <header\n      className=\"w-full bg-white text-zinc-950 dark:bg-zinc-950 dark:text-zinc-50\"\n      id=\"workspace\"\n    >\n      <div className=\"border-b border-zinc-200 dark:border-zinc-800\">\n        <div className=\"mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-5 py-4 sm:px-8\">\n          <a\n            className=\"inline-flex items-center gap-2.5 text-lg font-semibold tracking-tight\"\n            href={websiteHref}\n          >\n            <span className=\"grid size-8 place-items-center rounded-xl bg-violet-600 text-white\">\n              <Layers2 aria-hidden=\"true\" className=\"size-4\" />\n            </span>\n            {productName}\n            <span className=\"ml-1 rounded-md border border-zinc-200 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-widest text-zinc-500 dark:border-zinc-800\">\n              Workspace\n            </span>\n          </a>\n          <div className=\"flex items-center gap-4\">\n            <a\n              className=\"hidden items-center gap-1.5 text-xs text-zinc-500 transition-colors hover:text-violet-600 sm:inline-flex\"\n              href={websiteHref}\n            >\n              <ArrowLeft aria-hidden=\"true\" className=\"size-3.5\" /> Back to\n              website\n            </a>\n            <span className=\"inline-flex items-center gap-1.5 rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-medium text-amber-700 ring-1 ring-inset ring-amber-200 dark:bg-amber-950/30 dark:text-amber-300 dark:ring-amber-900\">\n              Interactive demo{\" \"}\n              <ArrowUpRight aria-hidden=\"true\" className=\"size-3\" />\n            </span>\n            <span\n              aria-label=\"Demo account\"\n              className=\"grid size-8 place-items-center rounded-full bg-zinc-100 text-xs font-semibold text-zinc-600 ring-1 ring-zinc-200 dark:bg-zinc-800 dark:text-zinc-300 dark:ring-zinc-700\"\n            >\n              JD\n            </span>\n          </div>\n        </div>\n      </div>\n      <div className=\"mx-auto grid max-w-7xl gap-6 px-5 pt-9 pb-7 sm:px-8 md:grid-cols-[1fr_260px] md:items-end\">\n        <div>\n          <p className=\"mb-2 text-xs font-medium text-violet-600 dark:text-violet-400\">\n            Your studio, in one place\n          </p>\n          <h1 className=\"max-w-2xl text-balance text-2xl font-semibold leading-tight tracking-tight sm:text-3xl\">\n            {title}\n          </h1>\n          <p className=\"mt-3 max-w-2xl text-sm leading-6 text-zinc-500 dark:text-zinc-400\">\n            {description}\n          </p>\n        </div>\n        <label className=\"flex min-h-10 items-center gap-2.5 rounded-xl border border-zinc-200 bg-zinc-50 px-3 text-zinc-400 focus-within:border-violet-400 focus-within:ring-2 focus-within:ring-violet-100 dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:ring-violet-900\">\n          <Search aria-hidden=\"true\" className=\"size-4 shrink-0\" />\n          <input\n            aria-label=\"Search workspace files\"\n            className=\"w-full min-w-0 bg-transparent py-2 text-sm text-zinc-800 outline-none placeholder:text-zinc-400 dark:text-zinc-200\"\n            onChange={(event) => {\n              setQuery(event.target.value);\n              onSearch?.(event.target.value);\n            }}\n            placeholder=\"Find a file…\"\n            type=\"search\"\n            value={searchQuery ?? query}\n          />\n          <Command\n            aria-hidden=\"true\"\n            className=\"size-3.5 shrink-0 opacity-50\"\n          />\n        </label>\n      </div>\n    </header>\n  );\n}\n"
    }
  ],
  "categories": [
    "workspace",
    "application",
    "clean-saas"
  ],
  "docs": "Import the default component from @components/uiblocks/workspace-header-01/workspace-header-01.tsx. React 19, Tailwind CSS 4, and the standard shadcn CSS theme variables are required. This block is framework-independent React and works in TanStack Start, Vite, and Next.js projects. Connect links or navigation callbacks to your host application. Demo avatars use public image URLs; replace them with your own assets. Demo handlers must be connected to your product. See https://uiblocks.org/workspace/workspace-header-01 for content guidelines and source attribution.",
  "meta": {
    "kind": "block",
    "version": "0.1.0",
    "source": {
      "name": "UIBlocks",
      "url": "https://uiblocks.org",
      "license": "MIT",
      "author": "UIBlocks contributors",
      "revision": "uiblocks-v0.1.0"
    },
    "license": "MIT",
    "style": "clean-saas",
    "pageType": "application",
    "featured": true,
    "tags": [
      "workspace",
      "header",
      "project",
      "tool",
      "工作台",
      "页头",
      "项目",
      "工具"
    ],
    "contentGuidelines": [
      "Use one workspace title and a short status message.",
      "Connect the primary action to file selection or creation in the containing page."
    ],
    "recommendedWith": [
      "upload-workflow-01",
      "usage-panel-01"
    ],
    "entry": "@components/uiblocks/workspace-header-01/workspace-header-01.tsx",
    "exportName": "default",
    "frameworkIndependent": true,
    "frameworkDependencies": [],
    "compatibleHosts": [
      "react",
      "vite",
      "tanstack-start",
      "nextjs"
    ],
    "requirements": {
      "react": ">=19",
      "tailwind": ">=4"
    },
    "previewUrl": "https://uiblocks.org/preview/workspace-header-01"
  }
}