xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
11 lines (10 loc) • 4.46 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { useState } from "react";
import { Home, BarChart3, Users, Settings, FileText, Calendar, MessageSquare, ChevronDown, Sparkles } from "lucide-react";
import { Sidebar, SidebarHeader, SidebarHeaderTitle, SidebarHeaderDescription, SidebarNav, SidebarNavItem, SidebarNavLink, SidebarNavButton, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarGroupContent, SidebarCollapsible, SidebarCollapsibleTrigger, SidebarCollapsibleContent, } from '../components/ui/sidebar.js';
import { Badge } from '../components/ui/badge.js';
export function AppSidebar({ collapsed = false }) {
const [isOpen, setIsOpen] = useState(false);
return (_jsxs(Sidebar, { className: collapsed ? "w-16" : "w-64", collapsed: collapsed, children: [_jsx(SidebarHeader, { children: _jsxs(SidebarHeaderTitle, { className: "flex items-center gap-2", children: [_jsx("div", { className: "p-2 rounded-lg bg-gradient-to-r from-primary to-purple-500", children: _jsx(Sparkles, { className: "h-5 w-5 text-white" }) }), !collapsed && (_jsxs("div", { children: [_jsx("div", { className: "text-lg font-bold", children: "Xlibs" }), _jsx(SidebarHeaderDescription, { children: "Component Library" })] }))] }) }), _jsxs(SidebarNav, { children: [_jsxs(SidebarGroup, { children: [!collapsed && _jsx(SidebarGroupLabel, { children: "Main Navigation" }), _jsxs(SidebarGroupContent, { children: [_jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/", isActive: true, children: [_jsx(Home, { className: "h-4 w-4" }), !collapsed && "Dashboard"] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/analytics", children: [_jsx(BarChart3, { className: "h-4 w-4" }), !collapsed && "Analytics"] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/users", children: [_jsx(Users, { className: "h-4 w-4" }), !collapsed && "Users"] }) })] })] }), _jsxs(SidebarGroup, { children: [!collapsed && _jsx(SidebarGroupLabel, { children: "Components" }), _jsx(SidebarGroupContent, { children: _jsxs(SidebarCollapsible, { open: isOpen, onOpenChange: setIsOpen, children: [_jsxs(SidebarCollapsibleTrigger, { children: [_jsx(Sparkles, { className: "h-4 w-4" }), !collapsed && (_jsxs(_Fragment, { children: ["UI Components", _jsx(ChevronDown, { className: "ml-auto h-4 w-4" })] }))] }), _jsxs(SidebarCollapsibleContent, { children: [_jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/components/ui", children: [_jsx("div", { className: "h-4 w-4 rounded bg-blue-500" }), !collapsed && (_jsxs(_Fragment, { children: ["Shadcn/UI", _jsx(Badge, { variant: "secondary", className: "ml-auto", children: "40" })] }))] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/components/magicui", children: [_jsx("div", { className: "h-4 w-4 rounded bg-purple-500" }), !collapsed && (_jsxs(_Fragment, { children: ["Magic UI", _jsx(Badge, { variant: "secondary", className: "ml-auto", children: "35" })] }))] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/components/aceternity", children: [_jsx("div", { className: "h-4 w-4 rounded bg-green-500" }), !collapsed && (_jsxs(_Fragment, { children: ["Aceternity", _jsx(Badge, { variant: "secondary", className: "ml-auto", children: "60" })] }))] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/components/charts", children: [_jsx("div", { className: "h-4 w-4 rounded bg-orange-500" }), !collapsed && (_jsxs(_Fragment, { children: ["Charts", _jsx(Badge, { variant: "secondary", className: "ml-auto", children: "17" })] }))] }) })] })] }) })] }), _jsxs(SidebarGroup, { children: [!collapsed && _jsx(SidebarGroupLabel, { children: "Tools" }), _jsxs(SidebarGroupContent, { children: [_jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/reports", children: [_jsx(FileText, { className: "h-4 w-4" }), !collapsed && "Reports"] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/calendar", children: [_jsx(Calendar, { className: "h-4 w-4" }), !collapsed && "Calendar"] }) }), _jsx(SidebarNavItem, { children: _jsxs(SidebarNavLink, { href: "/messages", children: [_jsx(MessageSquare, { className: "h-4 w-4" }), !collapsed && "Messages"] }) })] })] })] }), _jsx(SidebarFooter, { children: _jsxs(SidebarNavButton, { href: "/settings", children: [_jsx(Settings, { className: "h-4 w-4" }), !collapsed && "Settings"] }) })] }));
}