xlibs-components/dist/components/Navigation.js

Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications

"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { motion, AnimatePresence } from "motion/react";
import { Menu, X, ChevronRight, Sparkles, Home, LogOut, User, Bell, Search, Plus } from "lucide-react";
// Magic UI Components
import { UnifiedButton } from "./magicui/unified-button";
import { MagicCard } from "./magicui/magic-card";
// Shadcn Components
import { Button } from "./ui/button";
import { Badge } from "./ui/badge";
import { Input } from "./ui/input";
import { Separator } from "./ui/separator";
const navigationItems = [
    {
        name: "Home",
        href: "/",
        icon: Home,
        description: "Main dashboard"
    }
];
const componentLibraries = [
    {
        name: "Magic UI",
        href: "/magic-ui",
        icon: Sparkles,
        description: "Interactive components",
        color: "from-purple-500 to-pink-500"
    }
];
const quickActions = [
    {
        name: "New Screen",
        href: "/new-screen",
        icon: Plus,
        description: "Create a new screen"
    }
];
export function Navigation({ onLogout, children }) {
    const [sidebarOpen, setSidebarOpen] = useState(false);
    const [searchQuery, setSearchQuery] = useState("");
    const location = useLocation();
    const navigate = useNavigate();
    const isActive = (href) => location.pathname === href;
    const handleNavigation = (href) => {
        navigate(href);
        setSidebarOpen(false); // Close mobile sidebar after navigation
    };
    return (_jsxs("div", { className: "min-h-screen bg-background", children: [_jsx(AnimatePresence, { children: sidebarOpen && (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, className: "fixed inset-0 bg-black/50 z-40 lg:hidden", onClick: () => setSidebarOpen(false) })) }), _jsx(motion.aside, { initial: { x: -300 }, animate: { x: sidebarOpen ? 0 : -300 }, transition: { type: "spring", damping: 20 }, className: "fixed left-0 top-0 z-50 h-full w-80 bg-card border-r border-border lg:translate-x-0 lg:static lg:inset-0", children: _jsxs("div", { className: "flex h-full flex-col", children: [_jsxs("div", { className: "flex h-16 items-center justify-between px-6 border-b border-border", children: [_jsxs(Link, { to: "/", className: "flex items-center space-x-2", children: [_jsx("div", { className: "p-2 rounded-lg bg-gradient-to-r from-primary to-purple-500", children: _jsx(Sparkles, { className: "h-6 w-6 text-white" }) }), _jsxs("div", { children: [_jsx("h1", { className: "text-lg font-bold text-foreground", children: "Xlibs" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "Component Library" })] })] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarOpen(false), className: "lg:hidden", children: _jsx(X, { className: "h-4 w-4" }) })] }), _jsxs("div", { className: "flex-1 overflow-y-auto p-6 space-y-6", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wider", children: "Main Navigation" }), _jsx("nav", { className: "space-y-1", children: navigationItems.map((item) => (_jsxs("button", { onClick: () => handleNavigation(item.href), className: `group flex items-center space-x-3 px-3 py-2 rounded-lg text-sm font-medium transition-colors w-full text-left ${isActive(item.href)
                                                    ? "bg-primary text-primary-foreground"
                                                    : "text-muted-foreground hover:text-foreground hover:bg-muted"}`, children: [_jsx(item.icon, { className: "h-4 w-4" }), _jsx("span", { children: item.name }), isActive(item.href) && (_jsx(ChevronRight, { className: "h-4 w-4 ml-auto" }))] }, item.name))) })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wider", children: "Component Libraries" }), _jsx("div", { className: "space-y-2", children: componentLibraries.map((library) => (_jsx(MagicCard, { variant: "glass", className: "p-3 hover:scale-105 transition-transform cursor-pointer", onClick: () => handleNavigation(library.href), children: _jsxs("div", { className: "flex items-center space-x-3", children: [_jsx("div", { className: `p-2 rounded-lg bg-gradient-to-r ${library.color}`, children: _jsx(library.icon, { className: "h-4 w-4 text-white" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground group-hover:text-primary transition-colors", children: library.name }), _jsx("p", { className: "text-xs text-muted-foreground truncate", children: library.description })] })] }) }, library.name))) })] }), _jsx(Separator, {}), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "text-sm font-semibold text-muted-foreground uppercase tracking-wider", children: "Quick Actions" }), _jsx("div", { className: "space-y-2", children: quickActions.map((action) => (_jsxs(UnifiedButton, { variant: "outline", size: "sm", className: "w-full justify-start", onClick: () => handleNavigation(action.href), children: [_jsx(action.icon, { className: "mr-2 h-4 w-4" }), action.name] }, action.name))) })] })] }), _jsxs("div", { className: "border-t border-border p-6", children: [_jsxs("div", { className: "flex items-center space-x-3 mb-4", children: [_jsx("div", { className: "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center", children: _jsx(User, { className: "h-4 w-4 text-primary" }) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("p", { className: "text-sm font-medium text-foreground", children: "Developer" }), _jsx("p", { className: "text-xs text-muted-foreground", children: "dev@xlibs.com" })] })] }), onLogout && (_jsxs(UnifiedButton, { variant: "outline", size: "sm", onClick: onLogout, className: "w-full", children: [_jsx(LogOut, { className: "mr-2 h-4 w-4" }), "Logout"] }))] })] }) }), _jsxs("div", { className: "lg:pl-80", children: [_jsx("header", { className: "sticky top-0 z-30 bg-card/50 backdrop-blur-sm border-b border-border", children: _jsxs("div", { className: "flex h-16 items-center justify-between px-4 lg:px-6", children: [_jsxs("div", { className: "flex items-center space-x-4", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSidebarOpen(true), className: "lg:hidden", children: _jsx(Menu, { className: "h-5 w-5" }) }), _jsx("div", { className: "hidden md:block", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }), _jsx(Input, { placeholder: "Search...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "pl-10 w-64" })] }) })] }), _jsxs("div", { className: "flex items-center space-x-4", children: [_jsxs(Button, { variant: "ghost", size: "icon", className: "relative", children: [_jsx(Bell, { className: "h-5 w-5" }), _jsx(Badge, { className: "absolute -top-1 -right-1 h-5 w-5 rounded-full p-0 flex items-center justify-center text-xs", children: "0" })] }), _jsxs("div", { className: "hidden md:flex items-center space-x-2", children: [_jsx(Badge, { variant: "secondary", children: "v1.0.0" }), _jsx(Badge, { variant: "outline", children: "Development" })] })] })] }) }), _jsx("main", { className: "flex-1", children: children })] })] }));
}