{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"tabs-de-configuracoes","type":"registry:component","title":"Tabs de configurações","description":"Três abas em linha com cards de conta, notificações e cobrança.","author":"UI Catalog <https://ui.codehall.io>","dependencies":[],"registryDependencies":["button","card","input","label","switch","tabs"],"files":[{"path":"components/tabs-de-configuracoes.tsx","type":"registry:component","content":"'use client'\n\nimport { Bell, CreditCard, User } from 'lucide-react'\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Switch } from '@/components/ui/switch'\nimport { Label } from '@/components/ui/label'\nimport { Input } from '@/components/ui/input'\nimport { Button } from '@/components/ui/button'\n\nexport default function TabsSettings() {\n  return (\n    <Tabs defaultValue=\"conta\" className=\"w-full max-w-lg\">\n      <TabsList variant=\"line\">\n        <TabsTrigger value=\"conta\">\n          <User data-icon=\"inline-start\" /> Conta\n        </TabsTrigger>\n        <TabsTrigger value=\"notificacoes\">\n          <Bell data-icon=\"inline-start\" /> Notificações\n        </TabsTrigger>\n        <TabsTrigger value=\"cobranca\">\n          <CreditCard data-icon=\"inline-start\" /> Cobrança\n        </TabsTrigger>\n      </TabsList>\n      <TabsContent value=\"conta\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Conta</CardTitle>\n            <CardDescription>Dados básicos do seu usuário.</CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            <div className=\"space-y-1.5\">\n              <Label htmlFor=\"n\">Nome</Label>\n              <Input id=\"n\" defaultValue=\"Ana Souza\" />\n            </div>\n            <div className=\"space-y-1.5\">\n              <Label htmlFor=\"u\">Usuário</Label>\n              <Input id=\"u\" defaultValue=\"@anasouza\" />\n            </div>\n            <Button size=\"sm\">Salvar</Button>\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"notificacoes\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Notificações</CardTitle>\n            <CardDescription>Escolha o que chega até você.</CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-3\">\n            {['Novo lead atribuído', 'Mensagem sem resposta há 10 min', 'Resumo diário por e-mail'].map((l, i) => (\n              <div key={l} className=\"flex items-center justify-between text-sm\">\n                <span>{l}</span>\n                <Switch defaultChecked={i < 2} />\n              </div>\n            ))}\n          </CardContent>\n        </Card>\n      </TabsContent>\n      <TabsContent value=\"cobranca\">\n        <Card>\n          <CardHeader>\n            <CardTitle>Cobrança</CardTitle>\n            <CardDescription>Plano Pro · renova em 12/11/2026</CardDescription>\n          </CardHeader>\n          <CardContent className=\"space-y-3 text-sm\">\n            <div className=\"flex items-center justify-between rounded-lg border p-3\">\n              <span>Visa terminando em 4242</span>\n              <Button variant=\"outline\" size=\"sm\">\n                Trocar cartão\n              </Button>\n            </div>\n            <Button variant=\"ghost\" size=\"sm\" className=\"text-destructive\">\n              Cancelar assinatura\n            </Button>\n          </CardContent>\n        </Card>\n      </TabsContent>\n    </Tabs>\n  )\n}\n"}]}