Spaces:
Build error
Build error
File size: 7,544 Bytes
3eebcd0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | "use client";
import { useState } from "react";
import { PawPrint, RefreshCw } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Label } from "@/components/ui/label";
import { toast } from "sonner";
import { apiFetch, type Pet } from "./types";
interface Props { pets: Pet[]; onCreated: () => void; }
const petTypes = [
{ value: "dog", label: "🐕 Perro" },
{ value: "cat", label: "🐱 Gato" },
{ value: "bird", label: "🐦 Pájaro" },
{ value: "rabbit", label: "🐰 Conejo" },
{ value: "hamster", label: "🐹 Hámster" }
];
export default function PetsTab({ pets, onCreated }: Props) {
const [petName, setPetName] = useState("");
const [petType, setPetType] = useState("dog");
const [petBreed, setPetBreed] = useState("");
const [petPersonality, setPetPersonality] = useState("");
const [petLoading, setPetLoading] = useState(false);
const handleCreatePet = async () => {
if (!petName.trim()) { toast.error("Dale un nombre a tu mascota"); return; }
setPetLoading(true);
try {
const result = await apiFetch("/pets", {
method: "POST",
body: JSON.stringify({
name: petName, type: petType,
breed: petBreed || undefined,
personality: petPersonality || undefined,
generateReference: true
}),
});
if (result.success) {
toast.success(`Mascota "${petName}" creada (+${result.engagementBoost}% engagement)`);
setPetName(""); setPetBreed(""); setPetPersonality("");
onCreated();
} else toast.error(result.error);
} catch { toast.error("Error"); }
finally { setPetLoading(false); }
};
return (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card className="bg-slate-900/50 border-slate-800">
<CardHeader>
<CardTitle className="flex items-center gap-2"><PawPrint className="h-5 w-5 text-amber-400" />Crear Mascota</CardTitle>
<CardDescription>Las mascotas aumentan el engagement hasta un 35%</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-xs text-slate-400">Nombre</Label>
<Input placeholder="Max, Luna..." value={petName} onChange={(e) => setPetName(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
</div>
<div>
<Label className="text-xs text-slate-400">Tipo</Label>
<Select value={petType} onValueChange={setPetType}>
<SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue /></SelectTrigger>
<SelectContent>
{petTypes.map((pt) => (
<SelectItem key={pt.value} value={pt.value}>{pt.label}</SelectItem>
))}
</SelectContent>
</Select>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<Label className="text-xs text-slate-400">Raza (opcional)</Label>
<Input placeholder="Golden Retriever..." value={petBreed} onChange={(e) => setPetBreed(e.target.value)} className="bg-slate-800 border-slate-700 mt-1" />
</div>
<div>
<Label className="text-xs text-slate-400">Personalidad</Label>
<Select value={petPersonality} onValueChange={setPetPersonality}>
<SelectTrigger className="bg-slate-800 border-slate-700 mt-1"><SelectValue placeholder="Seleccionar" /></SelectTrigger>
<SelectContent>
<SelectItem value="playful">Juguetón</SelectItem>
<SelectItem value="calm">Tranquilo</SelectItem>
<SelectItem value="energetic">Energético</SelectItem>
<SelectItem value="curious">Curioso</SelectItem>
<SelectItem value="lazy">Perezoso</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<Button onClick={handleCreatePet} disabled={petLoading} className="w-full bg-amber-600 hover:bg-amber-700">
{petLoading ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <PawPrint className="h-4 w-4 mr-2" />}Crear Mascota
</Button>
</CardContent>
</Card>
<Card className="bg-slate-900/50 border-slate-800">
<CardHeader><CardTitle>Mis Mascotas</CardTitle></CardHeader>
<CardContent>
<ScrollArea className="h-64">
{pets.length === 0 ? (
<div className="text-center py-8 text-slate-400">
<PawPrint className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p>No tienes mascotas</p>
<p className="text-xs mt-1">Las mascotas aumentan el engagement</p>
</div>
) : (
<div className="space-y-2">
{pets.map((p) => (
<div key={p.id} className="p-3 rounded-lg bg-slate-800/50 flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-gradient-to-br from-amber-500 to-orange-500 flex items-center justify-center">
<PawPrint className="h-5 w-5 text-white" />
</div>
<div>
<p className="font-medium">{p.name}</p>
<p className="text-xs text-slate-400">{p.breed || p.type} • {p.personality || "Sin personalidad"}</p>
</div>
</div>
<Badge className="bg-green-500/20 text-green-400">+35%</Badge>
</div>
))}
</div>
)}
</ScrollArea>
</CardContent>
</Card>
</div>
);
}
|