82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
// src/layouts/DashboardLayout.tsx
|
|
import { type ReactNode } from "react";
|
|
import { motion } from "framer-motion";
|
|
import { FaHome, FaUser, FaCog, FaSignOutAlt } from "react-icons/fa";
|
|
import { Link, Outlet } from "react-router-dom";
|
|
|
|
export default function DashboardLayout() {
|
|
return (
|
|
<div className="flex h-screen bg-black text-white">
|
|
{/* Sidebar */}
|
|
<motion.aside
|
|
initial={{ x: -250 }}
|
|
animate={{ x: 0 }}
|
|
transition={{ duration: 0.4 }}
|
|
className="w-64 bg-zinc-900 shadow-xl flex flex-col"
|
|
>
|
|
<div className="p-4 font-bold text-xl border-b border-gray-800">
|
|
MyDashboard
|
|
</div>
|
|
<nav className="flex-1 p-4 space-y-2">
|
|
<SidebarLink to="/" icon={<FaHome />} label="Home" />
|
|
<SidebarLink to="/profile" icon={<FaUser />} label="Profile" />
|
|
<SidebarLink to="/settings" icon={<FaCog />} label="Settings" />
|
|
</nav>
|
|
<div className="p-4 border-t border-gray-800">
|
|
<SidebarLink to="/logout" icon={<FaSignOutAlt />} label="Logout" />
|
|
</div>
|
|
</motion.aside>
|
|
|
|
{/* Main content */}
|
|
<div className="flex flex-col flex-1">
|
|
{/* Top Navbar */}
|
|
<motion.header
|
|
initial={{ y: -80 }}
|
|
animate={{ y: 0 }}
|
|
transition={{ duration: 0.3 }}
|
|
className="bg-zinc-950 shadow px-6 py-3 flex justify-between items-center border-b border-gray-800"
|
|
>
|
|
<h1 className="text-lg font-semibold">Dashboard</h1>
|
|
<div className="flex items-center space-x-4">
|
|
<span className="text-white/80">Welcome back!</span>
|
|
<img
|
|
src="https://ui-avatars.com/api/?name=User&background=0D8ABC&color=fff"
|
|
alt="avatar"
|
|
className="w-8 h-8 rounded-full"
|
|
/>
|
|
</div>
|
|
</motion.header>
|
|
|
|
{/* Content area */}
|
|
<motion.main
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.5 }}
|
|
className="flex-1 overflow-y-auto p-6 bg-black"
|
|
>
|
|
<Outlet />
|
|
</motion.main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface SidebarLinkProps {
|
|
to: string;
|
|
icon: ReactNode;
|
|
label: string;
|
|
}
|
|
|
|
function SidebarLink({ to, icon, label }: SidebarLinkProps) {
|
|
return (
|
|
<Link
|
|
to={to}
|
|
className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-white/10 hover:text-white transition-colors"
|
|
>
|
|
<span className="text-lg">{icon}</span>
|
|
<span className="text-sm font-medium">{label}</span>
|
|
</Link>
|
|
);
|
|
}
|
|
|