{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "betting-panel-02",
  "title": "Betting Panel 02",
  "description": "A slider-based betting panel with a gradient risk slider for visual feedback on the chosen risk level.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "slider",
    "tabs"
  ],
  "files": [
    {
      "path": "registry/default/blocks/betting-panel-02/components/betting-panel.tsx",
      "content": "\"use client\";\n\nimport { Wallet } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Slider,\n  SliderControl,\n  SliderIndicator,\n  SliderThumb,\n  SliderTrack,\n} from \"@/components/ui/slider\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\n\nconst BALANCE = 1000;\n\nfunction getRiskInfo(value: number) {\n  if (value < 33) {\n    return { label: \"Low\", color: \"text-emerald-500\" };\n  }\n  if (value < 66) {\n    return { label: \"Medium\", color: \"text-amber-500\" };\n  }\n  return { label: \"High\", color: \"text-red-500\" };\n}\n\nexport function BettingPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const [betAmount, setBetAmount] = useState(1);\n  const [risk, setRisk] = useState(50);\n  const [rows, setRows] = useState(12);\n\n  const riskInfo = getRiskInfo(risk);\n\n  return (\n    <div className={className} {...props}>\n      <Card>\n        <CardContent>\n          <Tabs defaultValue=\"manual\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger className=\"flex-1\" value=\"manual\">\n                Manual\n              </TabsTrigger>\n              <TabsTrigger className=\"flex-1\" value=\"auto\">\n                Auto\n              </TabsTrigger>\n            </TabsList>\n          </Tabs>\n\n          <div className=\"mt-5 flex flex-col gap-6\">\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2 text-muted-foreground text-sm\">\n                <Wallet />\n                <span>Balance</span>\n              </div>\n              <span className=\"font-semibold text-base\">\n                ${BALANCE.toFixed(2)}\n              </span>\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground text-sm\">\n                  Bet Amount\n                </span>\n                <span className=\"font-bold text-xl tabular-nums\">\n                  ${betAmount.toFixed(2)}\n                </span>\n              </div>\n              <Slider\n                max={BALANCE}\n                min={0.01}\n                onValueChange={(v) =>\n                  setBetAmount(typeof v === \"number\" ? v : v[0])\n                }\n                step={0.01}\n                value={betAmount}\n              >\n                <SliderControl>\n                  <SliderTrack>\n                    <SliderIndicator />\n                    <SliderThumb />\n                  </SliderTrack>\n                </SliderControl>\n              </Slider>\n              <div className=\"flex justify-between text-muted-foreground text-xs\">\n                <span>$0.01</span>\n                <span>Max: ${BALANCE.toFixed(2)}</span>\n              </div>\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground text-sm\">Risk</span>\n                <span className={`font-semibold text-base ${riskInfo.color}`}>\n                  {riskInfo.label}\n                </span>\n              </div>\n              <Slider\n                max={100}\n                min={0}\n                onValueChange={(v) => setRisk(typeof v === \"number\" ? v : v[0])}\n                step={1}\n                value={risk}\n              >\n                <SliderControl>\n                  <SliderTrack>\n                    <SliderIndicator className=\"bg-gradient-to-r from-emerald-500 via-amber-500 to-red-500\" />\n                    <SliderThumb />\n                  </SliderTrack>\n                </SliderControl>\n              </Slider>\n            </div>\n\n            <div className=\"flex flex-col gap-3\">\n              <div className=\"flex items-center justify-between\">\n                <span className=\"text-muted-foreground text-sm\">Rows</span>\n                <span className=\"font-semibold text-base tabular-nums\">\n                  {rows}\n                </span>\n              </div>\n              <Slider\n                max={16}\n                min={8}\n                onValueChange={(v) => setRows(typeof v === \"number\" ? v : v[0])}\n                step={1}\n                value={rows}\n              >\n                <SliderControl>\n                  <SliderTrack>\n                    <SliderIndicator />\n                    <SliderThumb />\n                  </SliderTrack>\n                </SliderControl>\n              </Slider>\n              <div className=\"flex justify-between text-muted-foreground text-xs\">\n                <span>8</span>\n                <span>16</span>\n              </div>\n            </div>\n\n            <Button fullWidth>Place Bet</Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nexport default function BettingPanel02() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-sm\">\n        <BettingPanel />\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "betting"
  ],
  "type": "registry:block"
}