{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mock-browser-window-demo",
  "type": "registry:component",
  "registryDependencies": [
    "mock-browser-window",
    "button",
    "input",
    "label",
    "select",
    "switch"
  ],
  "files": [
    {
      "path": "registry/default/example/mock-browser-window-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\"\nimport { Switch } from \"@/components/ui/switch\"\nimport { BrowserWindow } from \"@/registry/default/ui/mock-browser-window\"\n\nexport default function DemoPage() {\n  const [config, setConfig] = useState({\n    variant: \"chrome\" as \"chrome\" | \"safari\",\n    headerStyle: \"full\" as \"minimal\" | \"full\",\n    size: \"lg\" as \"sm\" | \"md\" | \"lg\" | \"xl\",\n    showSidebar: true,\n    sidebarPosition: \"left\" as \"left\" | \"right\" | \"top\" | \"bottom\",\n    url: \"https://example.com/dashboard\",\n  })\n\n  const [sidebarItems] = useState([\n    { label: \"Overview\", active: true },\n    { label: \"Users\", badge: \"12\" },\n    { label: \"Analytics\", badge: \"new\" },\n    { label: \"Settings\" },\n  ])\n\n  return (\n    <div className=\"min-h-screen\">\n      <main className=\"container\">\n        <div className=\"mx-auto max-w-7xl\">\n          <div className=\"space-y-12\">\n            <div className=\"space-y-8\">\n              <div>\n                <h2 className=\"mb-6 text-lg font-semibold\">Preview</h2>\n                <div className=\"bg-muted/30 flex justify-center rounded-xl border p-8\">\n                  <BrowserWindow\n                    variant={config.variant}\n                    headerStyle={config.headerStyle}\n                    size={config.size}\n                    showSidebar={config.showSidebar}\n                    sidebarPosition={config.sidebarPosition}\n                    url={config.url}\n                    sidebarItems={config.showSidebar ? sidebarItems : undefined}\n                    className=\"w-full max-w-4xl\"\n                  />\n                </div>\n              </div>\n            </div>\n\n            <div className=\"space-y-8\">\n              <h2 className=\"text-lg font-semibold\">Window Settings</h2>\n              <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n                <div className=\"space-y-2\">\n                  <Label className=\"text-sm\">Browser</Label>\n                  <Select\n                    value={config.variant}\n                    onValueChange={(value: \"chrome\" | \"safari\") =>\n                      setConfig((prev) => ({ ...prev, variant: value }))\n                    }\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"chrome\">Chrome</SelectItem>\n                      <SelectItem value=\"safari\">Safari</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label className=\"text-sm\">Header Style</Label>\n                  <Select\n                    value={config.headerStyle}\n                    onValueChange={(value: \"minimal\" | \"full\") =>\n                      setConfig((prev) => ({ ...prev, headerStyle: value }))\n                    }\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"minimal\">Minimal</SelectItem>\n                      <SelectItem value=\"full\">Address Bar</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"space-y-2\">\n                  <Label className=\"text-sm\">Size</Label>\n                  <Select\n                    value={config.size}\n                    onValueChange={(value: \"sm\" | \"md\" | \"lg\" | \"xl\") =>\n                      setConfig((prev) => ({ ...prev, size: value }))\n                    }\n                  >\n                    <SelectTrigger>\n                      <SelectValue />\n                    </SelectTrigger>\n                    <SelectContent>\n                      <SelectItem value=\"sm\">Small</SelectItem>\n                      <SelectItem value=\"md\">Medium</SelectItem>\n                      <SelectItem value=\"lg\">Large</SelectItem>\n                      <SelectItem value=\"xl\">Extra Large</SelectItem>\n                    </SelectContent>\n                  </Select>\n                </div>\n\n                <div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n                  <Label className=\"text-sm\">URL</Label>\n                  <Input\n                    value={config.url}\n                    onChange={(e) =>\n                      setConfig((prev) => ({\n                        ...prev,\n                        url: e.target.value,\n                      }))\n                    }\n                    placeholder=\"https://example.com\"\n                  />\n                </div>\n\n                <div className=\"space-y-2\">\n                  <div className=\"flex items-center justify-between\">\n                    <Label className=\"text-sm\">Show Sidebar</Label>\n                    <Switch\n                      checked={config.showSidebar}\n                      onCheckedChange={(checked) =>\n                        setConfig((prev) => ({\n                          ...prev,\n                          showSidebar: checked,\n                        }))\n                      }\n                    />\n                  </div>\n                </div>\n\n                {config.showSidebar && (\n                  <div className=\"space-y-2\">\n                    <Label className=\"text-sm\">Sidebar Position</Label>\n                    <Select\n                      value={config.sidebarPosition}\n                      onValueChange={(\n                        value: \"left\" | \"right\" | \"top\" | \"bottom\"\n                      ) =>\n                        setConfig((prev) => ({\n                          ...prev,\n                          sidebarPosition: value,\n                        }))\n                      }\n                    >\n                      <SelectTrigger>\n                        <SelectValue />\n                      </SelectTrigger>\n                      <SelectContent>\n                        <SelectItem value=\"left\">Left</SelectItem>\n                        <SelectItem value=\"right\">Right</SelectItem>\n                      </SelectContent>\n                    </Select>\n                  </div>\n                )}\n\n                <div className=\"space-y-2 md:col-span-2 lg:col-span-1\">\n                  <Label className=\"text-sm\">Quick Presets</Label>\n                  <div className=\"flex gap-2\">\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"flex-1 bg-transparent\"\n                      onClick={() =>\n                        setConfig((prev) => ({\n                          ...prev,\n                          variant: \"chrome\",\n                          headerStyle: \"full\",\n                          showSidebar: true,\n                          size: \"lg\",\n                        }))\n                      }\n                    >\n                      Chrome Dashboard\n                    </Button>\n                    <Button\n                      variant=\"outline\"\n                      size=\"sm\"\n                      className=\"flex-1 bg-transparent\"\n                      onClick={() =>\n                        setConfig((prev) => ({\n                          ...prev,\n                          variant: \"safari\",\n                          headerStyle: \"minimal\",\n                          showSidebar: false,\n                          size: \"md\",\n                        }))\n                      }\n                    >\n                      Safari Minimal\n                    </Button>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </main>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    }
  ]
}