File size: 5,547 Bytes
6d9f36a 1e55efc 6d9f36a 1e55efc 6d9f36a |
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 |
import { useState } from "react";
import { Link } from "react-router-dom";
import { Menu, Terminal, X, Home, BookOpen, Coffee, BadgeAlert, ChevronRight } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useCategories } from "@/client/hooks/usePlugin";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
interface NavbarProps {
onCategorySelect?: (category: string | null) => void;
selectedCategory?: string | null;
}
export function Navbar({ onCategorySelect, selectedCategory }: NavbarProps) {
const [isOpen, setIsOpen] = useState(false);
const { categories } = useCategories();
const handleCategoryClick = (category: string) => {
onCategorySelect?.(category);
setIsOpen(false);
};
return (
<nav className="border-b border-white/10 bg-black/50 backdrop-blur-xl sticky top-0 z-50">
<div className="max-w-7xl mx-auto px-4 py-4">
<div className="flex items-center justify-between">
{/* Logo */}
<Link to="/" className="text-xl font-bold text-white flex items-center gap-2">
<Terminal className="w-5 h-5 text-primary" />
DitzzyAPI
</Link>
{/* Desktop Navigation */}
<div className="hidden md:flex items-center gap-6">
<Link
to="/"
className="text-gray-400 hover:text-white transition flex items-center gap-2"
>
<Home className="w-4 h-4" />
Home
</Link>
<Link to="/docs" className="text-purple-400 font-medium flex items-center gap-2">
<BookOpen className="w-4 h-4" />
Documentation
</Link>
</div>
{/* Hamburger Menu - Categories */}
<Sheet open={isOpen} onOpenChange={setIsOpen}>
<SheetTrigger asChild>
<Button variant="ghost" size="icon" className="text-white">
{isOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
</Button>
</SheetTrigger>
<SheetContent side="right" className="w-80 bg-background border-white/10">
<SheetHeader>
<SheetTitle className="text-white">Categories</SheetTitle>
</SheetHeader>
<div className="mt-6 space-y-2">
{/* All Endpoints */}
<button
onClick={() => handleCategoryClick("")}
className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-left transition ${
!selectedCategory
? "bg-purple-500/20 text-purple-400 border border-purple-500/50"
: "bg-white/5 text-gray-300 hover:bg-white/10"
}`}
>
<span className="font-medium">All Endpoints</span>
<ChevronRight className="w-4 h-4" />
</button>
{/* Categories */}
{categories.map((cat) => (
<button
key={cat.name}
onClick={() => handleCategoryClick(cat.name)}
className={`w-full flex items-center justify-between px-4 py-3 rounded-lg text-left transition ${
selectedCategory === cat.name
? "bg-purple-500/20 text-purple-400 border border-purple-500/50"
: "bg-white/5 text-gray-300 hover:bg-white/10"
}`}
>
<span className="capitalize">{cat.name}</span>
<div className="flex items-center gap-2">
<span className="text-xs bg-white/10 px-2 py-1 rounded">{cat.count}</span>
<ChevronRight className="w-4 h-4" />
</div>
</button>
))}
</div>
{/* Mobile Navigation Links */}
<div className="md:hidden mt-8 space-y-2 pt-6 border-t border-white/10">
<Link
to="/"
onClick={() => setIsOpen(false)}
className="flex items-center gap-2 px-4 py-3 rounded-lg text-gray-300 hover:bg-white/10 transition"
>
<Home className="w-4 h-4" />
Home
</Link>
<Link
to="/docs"
onClick={() => setIsOpen(false)}
className="flex items-center gap-2 px-4 py-3 rounded-lg text-purple-400 hover:bg-white/10 transition"
>
<BookOpen className="w-4 h-4" />
Documentation
</Link>
<a
href="https://github.com/OhMyDitzzy/DitzzyAPI/issues"
className="flex items-center gap-2 px-4 py-3 rounded-lg text-purple-400 hover:bg-white/10 transition"
>
<BadgeAlert className="w-4 h-4" />
Having an issue? Report here!
</a>
<a
href="https://saweria.co/DitzzDev"
className="flex items-center gap-2 px-4 py-3 rounded-lg text-purple-400 hover:bg-white/10 transition"
>
<Coffee className="w-4 h-4" />
Treat me to coffee
</a>
</div>
</SheetContent>
</Sheet>
</div>
</div>
</nav>
);
} |