39 lines
1.5 KiB
TypeScript
39 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const ICONS: Record<string, React.ReactNode> = {
|
|
video: (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="2" y="5" width="14" height="14" rx="2" />
|
|
<path d="M22 8.5 16 12l6 3.5v-7Z" />
|
|
</svg>
|
|
),
|
|
image: (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" />
|
|
<circle cx="9" cy="9" r="2" />
|
|
<path d="m21 15-4.5-4.5L7 20" />
|
|
</svg>
|
|
),
|
|
folder: (
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9L9.2 3.9A2 2 0 0 0 7.5 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />
|
|
</svg>
|
|
),
|
|
};
|
|
|
|
export default function NavLink({ href, icon, children }: {
|
|
href: string; icon?: string; children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const active = href === "/" ? pathname === "/" || pathname.startsWith("/poster") || pathname.startsWith("/playreel") : pathname.startsWith(href);
|
|
return (
|
|
<Link href={href} className={active ? "sidebar-item active" : "sidebar-item"}>
|
|
{icon && ICONS[icon]}
|
|
<span>{children}</span>
|
|
</Link>
|
|
);
|
|
}
|