|
@@ -36,245 +36,10 @@ export default function Home() {
|
|
|
<div className="space-y-8">
|
|
<div className="space-y-8">
|
|
|
{/* Header */}
|
|
{/* Header */}
|
|
|
<div className="text-center">
|
|
<div className="text-center">
|
|
|
- <h1 className="text-4xl font-bold tracking-tight">Sumire - shadcn/ui Demo</h1>
|
|
|
|
|
|
|
+ <h1 className="text-4xl font-bold tracking-tight">sumire</h1>
|
|
|
<p className="mt-2 text-muted-foreground">
|
|
<p className="mt-2 text-muted-foreground">
|
|
|
- Demostración completa de componentes shadcn/ui en Next.js
|
|
|
|
|
|
|
+ facturación electronica sin dependencias
|
|
|
</p>
|
|
</p>
|
|
|
- <div className="mt-4 flex justify-center gap-2">
|
|
|
|
|
- <Badge variant="default">Next.js</Badge>
|
|
|
|
|
- <Badge variant="secondary">shadcn/ui</Badge>
|
|
|
|
|
- <Badge variant="outline">Tailwind CSS</Badge>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- {/* Buttons Section */}
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader>
|
|
|
|
|
- <CardTitle>Botones</CardTitle>
|
|
|
|
|
- <CardDescription>Diferentes variantes y estados de botones</CardDescription>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent className="space-y-4">
|
|
|
|
|
- <div className="flex flex-wrap gap-2">
|
|
|
|
|
- <Button>Botón Primario</Button>
|
|
|
|
|
- <Button variant="secondary">Secundario</Button>
|
|
|
|
|
- <Button variant="destructive">Destructivo</Button>
|
|
|
|
|
- <Button variant="outline">Outline</Button>
|
|
|
|
|
- <Button variant="ghost">Ghost</Button>
|
|
|
|
|
- <Button variant="link">Link</Button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="flex flex-wrap gap-2">
|
|
|
|
|
- <Button size="sm">Pequeño</Button>
|
|
|
|
|
- <Button size="default">Por Defecto</Button>
|
|
|
|
|
- <Button size="lg">Grande</Button>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="flex flex-wrap gap-2">
|
|
|
|
|
- <Button disabled>Deshabilitado</Button>
|
|
|
|
|
- <Button variant="secondary">Cargando...</Button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- {/* Form Section */}
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader>
|
|
|
|
|
- <CardTitle>Formulario</CardTitle>
|
|
|
|
|
- <CardDescription>Ejemplo de formulario con diferentes campos</CardDescription>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <form onSubmit={handleSubmit} className="space-y-4">
|
|
|
|
|
- <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <Label htmlFor="name">Nombre</Label>
|
|
|
|
|
- <Input
|
|
|
|
|
- id="name"
|
|
|
|
|
- value={name}
|
|
|
|
|
- onChange={(e) => setName(e.target.value)}
|
|
|
|
|
- placeholder="Tu nombre"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <Label htmlFor="email">Email</Label>
|
|
|
|
|
- <Input
|
|
|
|
|
- id="email"
|
|
|
|
|
- type="email"
|
|
|
|
|
- value={email}
|
|
|
|
|
- onChange={(e) => setEmail(e.target.value)}
|
|
|
|
|
- placeholder="tu@email.com"
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <Label htmlFor="select">Opción</Label>
|
|
|
|
|
- <Select value={selectedOption} onValueChange={setSelectedOption}>
|
|
|
|
|
- <SelectTrigger>
|
|
|
|
|
- <SelectValue placeholder="Selecciona una opción" />
|
|
|
|
|
- </SelectTrigger>
|
|
|
|
|
- <SelectContent>
|
|
|
|
|
- <SelectItem value="option1">Opción 1</SelectItem>
|
|
|
|
|
- <SelectItem value="option2">Opción 2</SelectItem>
|
|
|
|
|
- <SelectItem value="option3">Opción 3</SelectItem>
|
|
|
|
|
- </SelectContent>
|
|
|
|
|
- </Select>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div className="space-y-2">
|
|
|
|
|
- <Label htmlFor="message">Mensaje</Label>
|
|
|
|
|
- <Textarea
|
|
|
|
|
- id="message"
|
|
|
|
|
- value={message}
|
|
|
|
|
- onChange={(e) => setMessage(e.target.value)}
|
|
|
|
|
- placeholder="Escribe tu mensaje aquí..."
|
|
|
|
|
- rows={3}
|
|
|
|
|
- />
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <div className="flex items-center space-x-4">
|
|
|
|
|
- <div className="flex items-center space-x-2">
|
|
|
|
|
- <Checkbox
|
|
|
|
|
- id="terms"
|
|
|
|
|
- checked={isChecked}
|
|
|
|
|
- onCheckedChange={(checked) => setIsChecked(checked as boolean)}
|
|
|
|
|
- />
|
|
|
|
|
- <Label htmlFor="terms">Acepto los términos y condiciones</Label>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="flex items-center space-x-2">
|
|
|
|
|
- <Switch
|
|
|
|
|
- id="notifications"
|
|
|
|
|
- checked={isSwitchOn}
|
|
|
|
|
- onCheckedChange={setIsSwitchOn}
|
|
|
|
|
- />
|
|
|
|
|
- <Label htmlFor="notifications">Notificaciones</Label>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- <Button type="submit" className="w-full">
|
|
|
|
|
- Enviar Formulario
|
|
|
|
|
- </Button>
|
|
|
|
|
- </form>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- {/* Dialog Section */}
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader>
|
|
|
|
|
- <CardTitle>Dialog</CardTitle>
|
|
|
|
|
- <CardDescription>Ejemplo de diálogo modal</CardDescription>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <Dialog>
|
|
|
|
|
- <DialogTrigger asChild>
|
|
|
|
|
- <Button variant="outline" onClick={handleDialogOpen}>
|
|
|
|
|
- Abrir Diálogo
|
|
|
|
|
- </Button>
|
|
|
|
|
- </DialogTrigger>
|
|
|
|
|
- <DialogContent>
|
|
|
|
|
- <DialogHeader>
|
|
|
|
|
- <DialogTitle>Diálogo de Ejemplo</DialogTitle>
|
|
|
|
|
- <DialogDescription>
|
|
|
|
|
- Este es un ejemplo de diálogo modal usando shadcn/ui.
|
|
|
|
|
- Puedes colocar cualquier contenido aquí.
|
|
|
|
|
- </DialogDescription>
|
|
|
|
|
- </DialogHeader>
|
|
|
|
|
- <div className="py-4">
|
|
|
|
|
- <p className="text-sm text-muted-foreground">
|
|
|
|
|
- Los diálogos son perfectos para confirmaciones, formularios
|
|
|
|
|
- o mostrar información importante sin navegar away de la página actual.
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div className="flex justify-end gap-2">
|
|
|
|
|
- <Button variant="outline">Cancelar</Button>
|
|
|
|
|
- <Button>Confirmar</Button>
|
|
|
|
|
- </div>
|
|
|
|
|
- </DialogContent>
|
|
|
|
|
- </Dialog>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- {/* Status Cards */}
|
|
|
|
|
- <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader className="pb-3">
|
|
|
|
|
- <CardTitle className="text-sm font-medium">Total Usuarios</CardTitle>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <div className="text-2xl font-bold">1,234</div>
|
|
|
|
|
- <p className="text-xs text-muted-foreground">
|
|
|
|
|
- <span className="text-green-600">+12%</span> desde el mes pasado
|
|
|
|
|
- </p>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader className="pb-3">
|
|
|
|
|
- <CardTitle className="text-sm font-medium">Ingresos</CardTitle>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <div className="text-2xl font-bold">$12,345</div>
|
|
|
|
|
- <p className="text-xs text-muted-foreground">
|
|
|
|
|
- <span className="text-green-600">+8%</span> desde el mes pasado
|
|
|
|
|
- </p>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader className="pb-3">
|
|
|
|
|
- <CardTitle className="text-sm font-medium">Tasa de Conversión</CardTitle>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <div className="text-2xl font-bold">3.2%</div>
|
|
|
|
|
- <p className="text-xs text-muted-foreground">
|
|
|
|
|
- <span className="text-red-600">-2%</span> desde el mes pasado
|
|
|
|
|
- </p>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
- </div>
|
|
|
|
|
-
|
|
|
|
|
- {/* Theme Toggle Demo */}
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader>
|
|
|
|
|
- <CardTitle>Selector de Tema</CardTitle>
|
|
|
|
|
- <CardDescription>Cambia entre modo claro, oscuro y sistema</CardDescription>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent className="flex items-center justify-between">
|
|
|
|
|
- <div>
|
|
|
|
|
- <p className="text-sm font-medium">Modo Actual</p>
|
|
|
|
|
- <p className="text-sm text-muted-foreground">
|
|
|
|
|
- Usa el botón para cambiar entre Light, Dark y System
|
|
|
|
|
- </p>
|
|
|
|
|
- </div>
|
|
|
|
|
- <ModeToggle />
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- {/* Badges Showcase */}
|
|
|
|
|
- <Card>
|
|
|
|
|
- <CardHeader>
|
|
|
|
|
- <CardTitle>Insignias (Badges)</CardTitle>
|
|
|
|
|
- <CardDescription>Diferentes variantes de badges</CardDescription>
|
|
|
|
|
- </CardHeader>
|
|
|
|
|
- <CardContent>
|
|
|
|
|
- <div className="flex flex-wrap gap-2">
|
|
|
|
|
- <Badge>Default</Badge>
|
|
|
|
|
- <Badge variant="secondary">Secondary</Badge>
|
|
|
|
|
- <Badge variant="destructive">Destructive</Badge>
|
|
|
|
|
- <Badge variant="outline">Outline</Badge>
|
|
|
|
|
- <Badge className="bg-green-500 hover:bg-green-600">Success</Badge>
|
|
|
|
|
- <Badge className="bg-yellow-500 hover:bg-yellow-600">Warning</Badge>
|
|
|
|
|
- <Badge className="bg-blue-500 hover:bg-blue-600">Info</Badge>
|
|
|
|
|
- </div>
|
|
|
|
|
- </CardContent>
|
|
|
|
|
- </Card>
|
|
|
|
|
-
|
|
|
|
|
- {/* Footer */}
|
|
|
|
|
- <div className="text-center py-8 border-t">
|
|
|
|
|
- <p className="text-muted-foreground">
|
|
|
|
|
- Demo creado con ❤️ usando Next.js y shadcn/ui
|
|
|
|
|
- </p>
|
|
|
|
|
- <div className="mt-2 flex justify-center gap-2">
|
|
|
|
|
- <Badge variant="outline">v1.0.0</Badge>
|
|
|
|
|
- <Badge variant="outline">TypeScript</Badge>
|
|
|
|
|
- </div>
|
|
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
|
);
|
|
);
|