{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "betting-panel-03",
  "title": "Betting Panel 03",
  "description": "A betting panel with quick-pick preset amounts for rapid bet placement.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input-group",
    "select",
    "tabs",
    "toggle-group"
  ],
  "files": [
    {
      "path": "registry/default/blocks/betting-panel-03/components/betting-panel.tsx",
      "content": "\"use client\";\n\nimport { DollarSign } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Field, FieldLabel } from \"@/components/ui/field\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/components/ui/select\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/components/ui/tabs\";\nimport { ToggleGroup, ToggleGroupItem } from \"@/components/ui/toggle-group\";\n\nconst BALANCE = 1000;\nconst PRESETS = [0.1, 1, 5, 10, 50, BALANCE];\nconst ROW_OPTIONS = [8, 9, 10, 11, 12, 13, 14, 15, 16];\n\nexport function BettingPanel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const [betAmount, setBetAmount] = useState(1);\n  const [risk, setRisk] = useState<string[]>([\"medium\"]);\n  const [rows, setRows] = useState(\"12\");\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-5\">\n            <div className=\"flex items-center justify-between rounded-md bg-muted/50 px-4 py-3\">\n              <span className=\"text-muted-foreground text-sm\">Balance</span>\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              <FieldLabel htmlFor=\"bet-amount\">Bet Amount</FieldLabel>\n              <InputGroup>\n                <InputGroupAddon align=\"inline-start\">\n                  <DollarSign />\n                </InputGroupAddon>\n                <InputGroupInput\n                  id=\"bet-amount\"\n                  inputMode=\"decimal\"\n                  onChange={(e) =>\n                    setBetAmount(Number.parseFloat(e.target.value) || 0)\n                  }\n                  type=\"number\"\n                  value={betAmount}\n                />\n              </InputGroup>\n              <div className=\"grid grid-cols-6 gap-2\">\n                {PRESETS.map((preset) => (\n                  <Button\n                    key={preset}\n                    onClick={() => setBetAmount(preset)}\n                    size=\"sm\"\n                    variant={betAmount === preset ? \"default\" : \"secondary\"}\n                  >\n                    {preset === BALANCE ? \"Max\" : `$${preset}`}\n                  </Button>\n                ))}\n              </div>\n            </div>\n\n            <Field>\n              <FieldLabel>Risk</FieldLabel>\n              <ToggleGroup\n                className=\"w-full\"\n                onValueChange={setRisk}\n                size=\"lg\"\n                spacing={2}\n                value={risk}\n                variant=\"secondary\"\n              >\n                <ToggleGroupItem\n                  className=\"flex-1 aria-pressed:bg-emerald-500 aria-pressed:text-white dark:aria-pressed:bg-emerald-600\"\n                  value=\"low\"\n                >\n                  Low\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"flex-1 aria-pressed:bg-amber-500 aria-pressed:text-white dark:aria-pressed:bg-amber-600\"\n                  value=\"medium\"\n                >\n                  Medium\n                </ToggleGroupItem>\n                <ToggleGroupItem\n                  className=\"flex-1 aria-pressed:bg-red-500 aria-pressed:text-white dark:aria-pressed:bg-red-600\"\n                  value=\"high\"\n                >\n                  High\n                </ToggleGroupItem>\n              </ToggleGroup>\n            </Field>\n\n            <Field>\n              <FieldLabel htmlFor=\"rows\">Rows</FieldLabel>\n              <Select\n                onValueChange={(v) => v !== null && setRows(v)}\n                value={rows}\n              >\n                <SelectTrigger className=\"w-full\" id=\"rows\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  {ROW_OPTIONS.map((num) => (\n                    <SelectItem key={num} value={num.toString()}>\n                      {num} rows\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </Field>\n\n            <Button fullWidth>Place Bet</Button>\n          </div>\n        </CardContent>\n      </Card>\n    </div>\n  );\n}\n\nexport default function BettingPanel03() {\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"
}