forked from 77media/video-flow
115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
import '../pages/style/top-bar.css';
|
|
import { Button } from '@/components/ui/button';
|
|
import { GradientText } from '@/components/ui/gradient-text';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
import { useTheme } from 'next-themes';
|
|
import {
|
|
Sun,
|
|
Moon,
|
|
User,
|
|
Settings,
|
|
LogOut,
|
|
Bell,
|
|
PanelsLeftBottom
|
|
} from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
|
|
export function TopBar({ collapsed, onToggleSidebar }: { collapsed: boolean; onToggleSidebar: () => void }) {
|
|
const { theme, setTheme } = useTheme();
|
|
const router = useRouter();
|
|
|
|
const handleAnimationEnd = (event: React.AnimationEvent<HTMLDivElement>) => {
|
|
const element = event.currentTarget;
|
|
element.classList.remove('on');
|
|
};
|
|
|
|
const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
const element = event.currentTarget;
|
|
element.classList.add('on');
|
|
};
|
|
|
|
return (
|
|
<div className="fixed right-0 top-0 left-0 h-16 header z-50">
|
|
<div className="h-full flex items-center justify-between pr-6 pl-2">
|
|
<div className="flex items-center space-x-4">
|
|
<Button className='button-NxtqWZ' variant="ghost" size="sm" onClick={onToggleSidebar}>
|
|
<PanelsLeftBottom className="h-4 w-4" />
|
|
</Button>
|
|
<div
|
|
className={`flex items-center cursor-pointer space-x-4 link-logo roll event-on`}
|
|
onClick={() => router.push('/')}
|
|
onMouseEnter={handleMouseEnter}
|
|
onAnimationEnd={handleAnimationEnd}
|
|
>
|
|
<span className="translate">
|
|
<span>
|
|
<h1 className="logo text-2xl font-bold">
|
|
<GradientText
|
|
text="MovieFlow"
|
|
startPercentage={30}
|
|
endPercentage={70}
|
|
/>
|
|
</h1>
|
|
</span>
|
|
<span>
|
|
<h1 className="logo text-2xl font-bold">
|
|
<GradientText
|
|
text="MovieFlow"
|
|
startPercentage={30}
|
|
endPercentage={70}
|
|
/>
|
|
</h1>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
{/* Notifications */}
|
|
<Button variant="ghost" size="sm">
|
|
<Bell className="h-4 w-4" />
|
|
</Button>
|
|
|
|
{/* Theme Toggle */}
|
|
{/* <Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
|
|
>
|
|
<Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
|
|
<Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
|
|
</Button> */}
|
|
|
|
{/* User Menu */}
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="sm">
|
|
<User className="h-4 w-4" />
|
|
<span className="ml-2">User</span>
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem>
|
|
<Settings className="mr-2 h-4 w-4" />
|
|
Settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuSeparator />
|
|
<DropdownMenuItem>
|
|
<LogOut className="mr-2 h-4 w-4" />
|
|
Log out
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |