{
  "$schema": "https://ethereal-ui.saefulrohman.dev/schema/registry-item.json",
  "name": "workspace-settings",
  "title": "Workspace Settings",
  "type": "registry:templates",
  "description": "Tabbed organization settings portal covering profile details, team members, billing usage, API keys, and security.",
  "dependencies": [
    "lucide-react"
  ],
  "usage": "import { WorkspaceSettingsTemplate } from \"@etherealui/react\"\n\nexport default function WorkspaceSettingsPage() {\n  return <WorkspaceSettingsTemplate />\n}",
  "files": [
    {
      "path": "packages/ui/src/templates/workspace-settings.tsx",
      "target": "components/ui/workspace-settings.tsx",
      "type": "registry:templates",
      "content": "import * as React from \"react\"\nimport { KeyRound, Copy, Check, Plus, Eye, EyeOff, X } from \"lucide-react\"\nimport { cn } from \"../utils/cn\"\nimport {\n  SidebarShell,\n  HeaderNavbar,\n  PageHeaderBar,\n} from \"../blocks/app-shell\"\nimport {\n  UserProfileFormBlock,\n  SecurityPasswordFormBlock,\n  TeamRbacTableBlock,\n  BillingPlanCardBlock,\n} from \"../blocks/settings-blocks\"\nimport { Tabs, TabsList, TabsTrigger, TabsContent } from \"../primitives/tabs\"\nimport { Badge } from \"../primitives/badge\"\nimport { Button } from \"../primitives/button\"\n\nexport const WorkspaceSettingsTemplate: React.FC<{ className?: string }> = ({\n  className,\n}) => {\n  const [copiedKey, setCopiedKey] = React.useState<string | null>(null)\n  const [revealSecret, setRevealSecret] = React.useState(false)\n  const [mobileNavOpen, setMobileNavOpen] = React.useState(false)\n\n  const apiKeys = [\n    {\n      id: \"key-prod\",\n      name: \"Production API Key\",\n      token: revealSecret\n        ? \"sk_live_99482a7f10c3e81140b29d\"\n        : \"sk_live_••••••••••••••••••••9d\",\n      scope: \"Read & Write\",\n      lastUsed: \"2 minutes ago\",\n    },\n    {\n      id: \"key-ci\",\n      name: \"CI/CD Deployment Token\",\n      token: \"sk_ci_••••••••••••••••••••4a\",\n      scope: \"Read-only\",\n      lastUsed: \"3 hours ago\",\n    },\n  ]\n\n  return (\n    <div\n      className={cn(\n        \"relative flex min-h-[560px] sm:min-h-[720px] w-full overflow-hidden rounded-2xl border border-zinc-200 bg-zinc-50/40 text-zinc-900 shadow-sm dark:border-zinc-800 dark:bg-zinc-950 dark:text-zinc-100\",\n        className\n      )}\n    >\n      <SidebarShell activeId=\"settings\" className=\"hidden md:flex\" />\n\n      {mobileNavOpen && (\n        <div className=\"absolute inset-0 z-30 flex md:hidden\">\n          <div\n            className=\"fixed inset-0 bg-black/50 backdrop-blur-xs\"\n            onClick={() => setMobileNavOpen(false)}\n          />\n          <div className=\"relative z-10 flex h-full\">\n            <SidebarShell\n              activeId=\"settings\"\n              className=\"h-full bg-white dark:bg-zinc-900 shadow-xl\"\n            />\n            <button\n              type=\"button\"\n              onClick={() => setMobileNavOpen(false)}\n              aria-label=\"Close sidebar\"\n              className=\"m-2 flex h-8 w-8 items-center justify-center rounded-lg bg-zinc-900/80 text-white\"\n            >\n              <X className=\"h-4 w-4\" />\n            </button>\n          </div>\n        </div>\n      )}\n\n      <div className=\"flex flex-1 flex-col min-w-0\">\n        <HeaderNavbar\n          breadcrumbs={[\"Workspace\", \"Settings\", \"General\"]}\n          onToggleMobileMenu={() => setMobileNavOpen(true)}\n        />\n\n        <main className=\"flex-1 space-y-5 sm:space-y-6 overflow-y-auto p-3.5 sm:p-6\">\n          <PageHeaderBar\n            title=\"Workspace Settings\"\n            subtitle=\"Manage your profile, team members, billing plan, and API keys.\"\n          />\n\n          <Tabs defaultValue=\"general\" className=\"w-full\">\n            <div className=\"overflow-x-auto pb-1\">\n              <TabsList variant=\"underline\" className=\"min-w-max\">\n                <TabsTrigger variant=\"underline\" value=\"general\">\n                  Profile\n                </TabsTrigger>\n                <TabsTrigger variant=\"underline\" value=\"team\">\n                  Team\n                </TabsTrigger>\n                <TabsTrigger variant=\"underline\" value=\"billing\">\n                  Billing\n                </TabsTrigger>\n                <TabsTrigger variant=\"underline\" value=\"apikeys\">\n                  API Keys\n                </TabsTrigger>\n                <TabsTrigger variant=\"underline\" value=\"security\">\n                  Security\n                </TabsTrigger>\n              </TabsList>\n            </div>\n\n            <TabsContent value=\"general\" className=\"pt-4\">\n              <UserProfileFormBlock />\n            </TabsContent>\n\n            <TabsContent value=\"team\" className=\"pt-4\">\n              <TeamRbacTableBlock />\n            </TabsContent>\n\n            <TabsContent value=\"billing\" className=\"pt-4\">\n              <BillingPlanCardBlock />\n            </TabsContent>\n\n            <TabsContent value=\"apikeys\" className=\"pt-4\">\n              <div className=\"rounded-xl border border-zinc-200 bg-white p-6 space-y-5 dark:border-zinc-800 dark:bg-zinc-900\">\n                <div className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between border-b border-zinc-200 pb-4 dark:border-zinc-800\">\n                  <div>\n                    <h3 className=\"text-sm font-semibold text-zinc-900 dark:text-zinc-100 flex items-center gap-2\">\n                      <KeyRound className=\"h-4 w-4 text-blue-600 dark:text-blue-400\" />\n                      API Keys\n                    </h3>\n                    <p className=\"mt-1 text-xs text-zinc-500 dark:text-zinc-400\">\n                      Use these keys to authenticate API requests from your backend.\n                    </p>\n                  </div>\n                  <div className=\"flex items-center gap-2\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      onClick={() => setRevealSecret(!revealSecret)}\n                    >\n                      {revealSecret ? (\n                        <EyeOff className=\"h-3.5 w-3.5\" />\n                      ) : (\n                        <Eye className=\"h-3.5 w-3.5\" />\n                      )}\n                      {revealSecret ? \"Hide\" : \"Reveal\"}\n                    </Button>\n                    <Button variant=\"primary\" size=\"sm\">\n                      <Plus className=\"h-3.5 w-3.5\" />\n                      Create key\n                    </Button>\n                  </div>\n                </div>\n\n                <div className=\"divide-y divide-zinc-200 rounded-xl border border-zinc-200 dark:divide-zinc-800 dark:border-zinc-800\">\n                  {apiKeys.map((k) => (\n                    <div\n                      key={k.id}\n                      className=\"flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between p-4\"\n                    >\n                      <div className=\"space-y-1\">\n                        <div className=\"flex items-center gap-2\">\n                          <span className=\"text-xs font-medium text-zinc-900 dark:text-zinc-100\">\n                            {k.name}\n                          </span>\n                          <Badge variant=\"default\">{k.scope}</Badge>\n                        </div>\n                        <p className=\"font-mono text-xs text-zinc-500 dark:text-zinc-400\">\n                          {k.token}\n                        </p>\n                      </div>\n                      <div className=\"flex items-center gap-3\">\n                        <span className=\"text-[11px] text-zinc-400\">\n                          Used {k.lastUsed}\n                        </span>\n                        <Button\n                          variant=\"outline\"\n                          size=\"sm\"\n                          onClick={() => {\n                            navigator.clipboard?.writeText(k.token)\n                            setCopiedKey(k.id)\n                            setTimeout(() => setCopiedKey(null), 1500)\n                          }}\n                        >\n                          {copiedKey === k.id ? (\n                            <Check className=\"h-3.5 w-3.5 text-emerald-500\" />\n                          ) : (\n                            <Copy className=\"h-3.5 w-3.5\" />\n                          )}\n                          {copiedKey === k.id ? \"Copied\" : \"Copy\"}\n                        </Button>\n                      </div>\n                    </div>\n                  ))}\n                </div>\n              </div>\n            </TabsContent>\n\n            <TabsContent value=\"security\" className=\"pt-4\">\n              <SecurityPasswordFormBlock />\n            </TabsContent>\n          </Tabs>\n        </main>\n      </div>\n    </div>\n  )\n}\n"
    }
  ]
}