twotalesanimation
117 lines
4.1 KiB
TypeScript
117 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { usePathname } from 'next/navigation';
|
|
import { Button } from "@/components/ui/button"
|
|
import { Separator } from "@/components/ui/separator"
|
|
import { SidebarTrigger } from "@/components/ui/sidebar"
|
|
import Link from 'next/link';
|
|
import { ChevronRight } from 'lucide-react';
|
|
|
|
function getBreadcrumbs(pathname: string) {
|
|
// Map routes to breadcrumb labels
|
|
const routeMap: Record<string, { label: string; href: string }[]> = {
|
|
'/dashboard': [{ label: 'Dashboard', href: '/dashboard' }],
|
|
'/dashboard/liked-videos': [
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
|
{ label: 'Liked Videos', href: '/dashboard/liked-videos' }
|
|
],
|
|
'/dashboard/watch-history': [
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
|
{ label: 'Watch History', href: '/dashboard/watch-history' }
|
|
],
|
|
'/videoplayer': [
|
|
{ label: 'Dashboard', href: '/dashboard' },
|
|
{ label: 'Video Player', href: '/videoplayer' }
|
|
],
|
|
'/admin': [{ label: 'Admin Panel', href: '/admin' }],
|
|
'/admin/users': [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Users', href: '/admin/users' }
|
|
],
|
|
'/admin/courses': [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Courses', href: '/admin/courses' }
|
|
],
|
|
'/admin/playlists': [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Playlists', href: '/admin/playlists' }
|
|
],
|
|
'/admin/videos': [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Videos', href: '/admin/videos' }
|
|
],
|
|
'/admin/enrollments': [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Enrollments', href: '/admin/enrollments' }
|
|
],
|
|
'/login': [{ label: 'Login', href: '/login' }],
|
|
};
|
|
|
|
// Check for exact match first
|
|
if (routeMap[pathname]) {
|
|
return routeMap[pathname];
|
|
}
|
|
|
|
// Check for prefix matches (like /admin/users/[userId])
|
|
for (const [route, breadcrumbs] of Object.entries(routeMap)) {
|
|
if (pathname.startsWith(route + '/')) {
|
|
// For dynamic routes like /admin/users/[userId]/...
|
|
if (route === '/admin/users' && pathname.match(/^\/admin\/users\/[^/]+/)) {
|
|
return [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Users', href: '/admin/users' },
|
|
{ label: 'User Details', href: pathname.split('/').slice(0, 4).join('/') }
|
|
];
|
|
}
|
|
if (route === '/admin/videos' && pathname.match(/^\/admin\/videos\/[^/]+/)) {
|
|
return [
|
|
{ label: 'Admin Panel', href: '/admin' },
|
|
{ label: 'Videos', href: '/admin/videos' },
|
|
{ label: 'Edit Video', href: pathname.split('/').slice(0, 4).join('/') }
|
|
];
|
|
}
|
|
}
|
|
}
|
|
|
|
// Default fallback
|
|
return [{ label: 'Library', href: '/' }];
|
|
}
|
|
|
|
export function SiteHeader() {
|
|
const pathname = usePathname();
|
|
const breadcrumbs = getBreadcrumbs(pathname);
|
|
|
|
return (
|
|
<header className="flex h-(--header-height) shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-(--header-height)">
|
|
<div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
|
|
<SidebarTrigger className="-ml-1" />
|
|
<Separator
|
|
orientation="vertical"
|
|
className="mx-2 data-[orientation=vertical]:h-4"
|
|
/>
|
|
<nav className="flex items-center gap-1">
|
|
{breadcrumbs.map((crumb, index) => (
|
|
<div key={crumb.href} className="flex items-center gap-1">
|
|
{index > 0 && (
|
|
<ChevronRight className="w-4 h-4 text-muted-foreground" />
|
|
)}
|
|
{index === breadcrumbs.length - 1 ? (
|
|
<span className="text-sm font-medium text-foreground">
|
|
{crumb.label}
|
|
</span>
|
|
) : (
|
|
<Link
|
|
href={crumb.href}
|
|
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
|
|
>
|
|
{crumb.label}
|
|
</Link>
|
|
)}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|