routes

frontend/src/layout/Dashboard.tsx

@@ -0,0 +1,81 @@
+// 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-gray-100 text-gray-900">
+      {/* Sidebar */}
+      <motion.aside
+        initial={{ x: -250 }}
+        animate={{ x: 0 }}
+        transition={{ duration: 0.4 }}
+        className="w-64 bg-white shadow-xl flex flex-col"
+      >
+        <div className="p-4 font-bold text-xl border-b border-gray-200">
+          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-200">
+          <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-white shadow px-6 py-3 flex justify-between items-center"
+        >
+          <h1 className="text-lg font-semibold">Dashboard</h1>
+          <div className="flex items-center space-x-4">
+            <span className="text-gray-600">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"
+        >
+          <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-blue-100 hover:text-blue-700 transition-colors"
+    >
+      <span className="text-lg">{icon}</span>
+      <span className="text-sm font-medium">{label}</span>
+    </Link>
+  );
+}
+