shadcn/app/public/registry/styles/default/safari.json

{
  "name": "safari",
  "description": "Safari browser window mockup",
  "files": [
    {
      "name": "safari.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n  ChevronLeft,\n  ChevronRight,\n  Menu,\n  Plus,\n  RotateCw,\n  Share2,\n} from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ninterface SafariProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode\n  url?: string\n  showToolbar?: boolean\n}\n\nconst Safari = React.forwardRef<HTMLDivElement, SafariProps>(\n  (\n    {\n      className,\n      children,\n      url = \"https://ui.hanzo.ai\",\n      showToolbar = true,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"mx-auto w-full max-w-5xl overflow-hidden rounded-xl border shadow-2xl\",\n          className\n        )}\n        {...props}\n      >\n        {/* Window Chrome */}\n        <div className=\"flex items-center gap-2 border-b bg-zinc-100 px-3 py-2 dark:bg-zinc-900\">\n          {/* Traffic Lights */}\n          <div className=\"flex gap-2\">\n            <div className=\"h-3 w-3 rounded-full bg-red-500\" />\n            <div className=\"h-3 w-3 rounded-full bg-yellow-500\" />\n            <div className=\"h-3 w-3 rounded-full bg-green-500\" />\n          </div>\n\n          {/* Navigation Controls */}\n          <div className=\"ml-2 flex items-center gap-1\">\n            <button className=\"rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800\">\n              <ChevronLeft className=\"h-4 w-4 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n            <button className=\"rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800\">\n              <ChevronRight className=\"h-4 w-4 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n          </div>\n\n          {/* URL Bar */}\n          <div className=\"mx-3 flex flex-1 items-center gap-2 rounded-lg bg-white px-3 py-1.5 dark:bg-zinc-800\">\n            <svg\n              className=\"h-4 w-4 text-zinc-400\"\n              viewBox=\"0 0 24 24\"\n              fill=\"currentColor\"\n            >\n              <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\" />\n            </svg>\n            <span className=\"flex-1 text-sm text-zinc-600 dark:text-zinc-400\">\n              {url}\n            </span>\n            <button className=\"rounded p-1 hover:bg-zinc-100 dark:hover:bg-zinc-700\">\n              <RotateCw className=\"h-3.5 w-3.5 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n          </div>\n\n          {/* Right Controls */}\n          <div className=\"flex items-center gap-1\">\n            <button className=\"rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800\">\n              <Share2 className=\"h-4 w-4 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n            <button className=\"rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800\">\n              <Plus className=\"h-4 w-4 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n            <button className=\"rounded p-1 hover:bg-zinc-200 dark:hover:bg-zinc-800\">\n              <Menu className=\"h-4 w-4 text-zinc-600 dark:text-zinc-400\" />\n            </button>\n          </div>\n        </div>\n\n        {/* Optional Toolbar */}\n        {showToolbar && (\n          <div className=\"flex items-center gap-4 border-b bg-zinc-50 px-4 py-2 text-sm dark:bg-zinc-900\">\n            <button className=\"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\">\n              Favorites\n            </button>\n            <button className=\"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\">\n              Reading List\n            </button>\n            <button className=\"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\">\n              History\n            </button>\n          </div>\n        )}\n\n        {/* Content Area */}\n        <div className=\"bg-white dark:bg-zinc-950\">{children}</div>\n      </div>\n    )\n  }\n)\nSafari.displayName = \"Safari\"\n\nexport { Safari }\n"
    }
  ],
  "type": "components:ui"
}