new gui
This commit is contained in:
@@ -6,15 +6,15 @@ import { Link, Outlet } from "react-router-dom";
|
||||
|
||||
export default function DashboardLayout() {
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-100 text-gray-900">
|
||||
<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-white shadow-xl flex flex-col"
|
||||
className="w-64 bg-zinc-900 shadow-xl flex flex-col"
|
||||
>
|
||||
<div className="p-4 font-bold text-xl border-b border-gray-200">
|
||||
<div className="p-4 font-bold text-xl border-b border-gray-800">
|
||||
MyDashboard
|
||||
</div>
|
||||
<nav className="flex-1 p-4 space-y-2">
|
||||
@@ -22,7 +22,7 @@ export default function DashboardLayout() {
|
||||
<SidebarLink to="/profile" icon={<FaUser />} label="Profile" />
|
||||
<SidebarLink to="/settings" icon={<FaCog />} label="Settings" />
|
||||
</nav>
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<div className="p-4 border-t border-gray-800">
|
||||
<SidebarLink to="/logout" icon={<FaSignOutAlt />} label="Logout" />
|
||||
</div>
|
||||
</motion.aside>
|
||||
@@ -34,11 +34,11 @@ export default function DashboardLayout() {
|
||||
initial={{ y: -80 }}
|
||||
animate={{ y: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
className="bg-white shadow px-6 py-3 flex justify-between items-center"
|
||||
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-gray-600">Welcome back!</span>
|
||||
<span className="text-white/80">Welcome back!</span>
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name=User&background=0D8ABC&color=fff"
|
||||
alt="avatar"
|
||||
@@ -52,7 +52,7 @@ export default function DashboardLayout() {
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="flex-1 overflow-y-auto p-6"
|
||||
className="flex-1 overflow-y-auto p-6 bg-black"
|
||||
>
|
||||
<Outlet />
|
||||
</motion.main>
|
||||
@@ -71,7 +71,7 @@ function SidebarLink({ to, icon, label }: SidebarLinkProps) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
className="flex items-center gap-3 px-3 py-2 rounded-md hover:bg-blue-100 hover:text-blue-700 transition-colors"
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user