Spaces:
Build error
Build error
File size: 3,862 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 | "use client";
import { motion, AnimatePresence } from "framer-motion";
import {
Bot, Wand2, ImageIcon, Video, FolderGit2,
DollarSign, Film, Zap, TrendingUp, Calendar,
PawPrint, Users2
} from "lucide-react";
interface Props {
sidebarOpen: boolean;
activeTab: string;
setActiveTab: (tab: string) => void;
stats: { images: number; videos: number; stories: number; pets: number };
}
const navItems = [
{ id: "prompt-engineer", icon: Wand2, label: "Ingeniero IA" },
{ id: "images", icon: ImageIcon, label: "Imágenes" },
{ id: "videos", icon: Video, label: "Videos" },
{ id: "monetization", icon: DollarSign, label: "Monetización" },
{ id: "posts", icon: Calendar, label: "Publicaciones" },
{ id: "storytelling", icon: Film, label: "Storytelling" },
{ id: "automation", icon: Zap, label: "Automatización" },
{ id: "influencers", icon: Users2, label: "Influencers IA" },
{ id: "pets", icon: PawPrint, label: "Mascotas" },
{ id: "trends", icon: TrendingUp, label: "Tendencias" },
{ id: "content", icon: FolderGit2, label: "Contenido" },
];
export default function DashboardSidebar({ sidebarOpen, activeTab, setActiveTab, stats }: Props) {
return (
<AnimatePresence mode="wait">
{sidebarOpen && (
<motion.aside
initial={{ x: -280 }} animate={{ x: 0 }} exit={{ x: -280 }}
className="fixed left-0 top-0 h-full w-64 bg-slate-900/90 backdrop-blur-xl border-r border-slate-800 z-50"
>
<div className="p-5">
<div className="flex items-center gap-3 mb-6">
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 flex items-center justify-center">
<Bot className="h-5 w-5" />
</div>
<div>
<h1 className="text-lg font-bold bg-gradient-to-r from-violet-400 to-purple-400 bg-clip-text text-transparent">AI Influencer Studio</h1>
<p className="text-xs text-slate-400">Plataforma SaaS</p>
</div>
</div>
<nav className="space-y-1">
{navItems.map((item) => (
<button key={item.id} onClick={() => setActiveTab(item.id)}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-sm ${activeTab === item.id ? "bg-violet-500/20 text-violet-400 border border-violet-500/30" : "text-slate-400 hover:bg-slate-800"}`}>
<item.icon className="h-4 w-4" /><span>{item.label}</span>
</button>
))}
</nav>
</div>
<div className="absolute bottom-0 left-0 right-0 p-4 border-t border-slate-800">
<div className="grid grid-cols-2 gap-2 text-center text-xs">
<div><p className="text-xl font-bold text-violet-400">{stats.images}</p><p className="text-slate-500">Imágenes</p></div>
<div><p className="text-xl font-bold text-blue-400">{stats.videos}</p><p className="text-slate-500">Videos</p></div>
<div><p className="text-xl font-bold text-green-400">{stats.stories}</p><p className="text-slate-500">Historias</p></div>
<div><p className="text-xl font-bold text-amber-400">{stats.pets}</p><p className="text-slate-500">Mascotas</p></div>
</div>
</div>
</motion.aside>
)}
</AnimatePresence>
);
}
|