{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "screen-size-demo",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://reusables.vercel.app/r/use-screen-size"
  ],
  "files": [
    {
      "path": "registry/example/screen-size-demo.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Monitor, Smartphone, Tablet } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nimport useScreenSize from \"@/hooks/use-screen-size\"\n\nexport default function ScreenSizeDemo() {\n  const { screenSize, isMobile } = useScreenSize()\n  const [forcedWidth, setForcedWidth] = useState<string | null>(null)\n\n  const breakpoints = [\n    {\n      name: \"Mobile\",\n      width: \"400px\",\n      icon: <Smartphone className=\"h-6 w-6\" />,\n      expected: [\"xs\", \"sm\"],\n    },\n    {\n      name: \"Tablet\",\n      width: \"758px\",\n      icon: <Tablet className=\"h-6 w-6\" />,\n      expected: [\"md\"],\n    },\n    {\n      name: \"Desktop\",\n      width: \"1200px\",\n      icon: <Monitor className=\"h-6 w-6\" />,\n      expected: [\"lg\"],\n    },\n    // {\n    //   name: \"4K\",\n    //   width: \"1800px\",\n    //   icon: <Television className=\"w-6 h-6\" />,\n    //   expected: [\"4k\"],\n    // },\n  ]\n\n  return (\n    <div className=\"space-y-8\">\n      <div className=\"flex flex-wrap gap-4\">\n        {breakpoints.map((point) => (\n          <Button\n            key={point.name}\n            variant={forcedWidth === point.width ? \"default\" : \"outline\"}\n            onClick={() =>\n              setForcedWidth(forcedWidth === point.width ? null : point.width)\n            }\n            className=\"flex items-center gap-2\"\n          >\n            {point.icon}\n            {point.name}\n          </Button>\n        ))}\n      </div>\n\n      <Card\n        style={{ width: forcedWidth || \"100%\" }}\n        className=\"p-6 transition-all duration-300\"\n      >\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center gap-4\">\n            {breakpoints.map((point) => (\n              <div\n                key={point.name}\n                className={`rounded p-2 ${\n                  point.expected.includes(screenSize || \"\") ?\n                    \"bg-primary text-primary-foreground\"\n                  : \"bg-muted\"\n                }`}\n              >\n                {point.icon}\n              </div>\n            ))}\n          </div>\n\n          <div className=\"space-y-2\">\n            <p className=\"text-lg font-medium\">\n              Current Screen Size:{\" \"}\n              <span className=\"text-primary\">{screenSize}</span>\n            </p>\n            <p>Device Type: {isMobile ? \"Mobile\" : \"Desktop\"}</p>\n            <p className=\"text-sm text-muted-foreground\">\n              Resize the card or your browser window to see changes\n            </p>\n          </div>\n        </div>\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:example",
      "target": "components/screen-size-demo.tsx"
    }
  ],
  "type": "registry:example"
}