{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stock-sm-03",
  "type": "registry:component",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://wigggle-ui.vercel.app/r/widget.json",
    "https://wigggle-ui.vercel.app/r/label.json",
    "https://wigggle-ui.vercel.app/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/default/widgets/stocks/sm/stock-03.tsx",
      "content": "import * as React from \"react\";\r\nimport { EyeIcon, TriangleIcon } from \"lucide-react\";\r\n\r\nimport {\r\n  Widget,\r\n  WidgetContent,\r\n  WidgetHeader,\r\n  WidgetTitle,\r\n} from \"@/registry/default/ui/widget\";\r\nimport { Label } from \"@/registry/default/ui/label\";\r\nimport { cn, truncate } from \"@/registry/default/lib/utils\";\r\n\r\nconst stocks = [\r\n  {\r\n    ticker: \"AAPL\",\r\n    company: \"Apple Inc\",\r\n    value: 262.24,\r\n    difference: 4.26,\r\n    isPositive: false,\r\n  },\r\n  {\r\n    ticker: \"AMZN\",\r\n    company: \"Amazon.com Inc.\",\r\n    value: 187.24,\r\n    difference: 7.7,\r\n    isPositive: true,\r\n  },\r\n  {\r\n    ticker: \"GOOGL\",\r\n    company: \"Alphabet Inc Class A\",\r\n    value: 290.24,\r\n    difference: 2.98,\r\n    isPositive: true,\r\n  },\r\n];\r\n\r\nexport default function WidgetDemo() {\r\n  return (\r\n    <Widget design=\"mumbai\">\r\n      <WidgetHeader>\r\n        <WidgetTitle>Watchlist</WidgetTitle>\r\n        <EyeIcon className=\"size-4\" />\r\n      </WidgetHeader>\r\n      <WidgetContent className=\"mt-0.5 flex-col items-start justify-start\">\r\n        {stocks.map((stock) => (\r\n          <div\r\n            key={stock.ticker}\r\n            className=\"flex w-full items-center justify-between space-x-2 border-b py-1.5 last:border-b-0\"\r\n          >\r\n            <div className=\"flex flex-col items-start gap-0\">\r\n              <Label className=\"text-sm font-semibold\">\r\n                <TriangleIcon\r\n                  className={cn(\r\n                    stock.isPositive\r\n                      ? \"fill-productive\"\r\n                      : \"fill-destructive rotate-180\",\r\n                    \"size-2 stroke-none\",\r\n                  )}\r\n                />\r\n                {stock.ticker}\r\n              </Label>\r\n              <Label className=\"text-muted-foreground text-xs\">\r\n                {truncate(stock.company)}\r\n              </Label>\r\n            </div>\r\n            <div className=\"flex flex-col items-end gap-0\">\r\n              <Label className=\"text-sm font-semibold\">{stock.value}</Label>\r\n              <Label\r\n                className={cn(\r\n                  stock.isPositive ? \"text-productive\" : \"text-destructive\",\r\n                )}\r\n              >\r\n                {stock.isPositive ? \"+\" : \"-\"}\r\n                {stock.difference}\r\n              </Label>\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </WidgetContent>\r\n    </Widget>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "tags": [
      "stocks"
    ],
    "size": "sm"
  }
}