aboutsummaryrefslogtreecommitdiffstats
path: root/frontend/src/components/layouts/MainLayout.js
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/components/layouts/MainLayout.js')
-rw-r--r--frontend/src/components/layouts/MainLayout.js256
1 files changed, 256 insertions, 0 deletions
diff --git a/frontend/src/components/layouts/MainLayout.js b/frontend/src/components/layouts/MainLayout.js
new file mode 100644
index 0000000..51e0e7e
--- /dev/null
+++ b/frontend/src/components/layouts/MainLayout.js
@@ -0,0 +1,256 @@
+import Link from 'next/link';
+import { useAuth } from '@/context/auth-context';
+import { useCart } from '@/context/cart-context';
+import { useTheme } from '@/context/theme-context';
+
+const MainLayout = ({ children }) => {
+ const { user, isAuthenticated, logout } = useAuth();
+ const { getItemCount } = useCart();
+ const { theme, toggleTheme } = useTheme();
+
+ const cartItemCount = getItemCount();
+
+ return (
+ <div className="flex flex-col min-h-screen">
+ {/* Header */}
+ <header className="bg-white dark:bg-slate-900 border-b border-gray-200 dark:border-slate-700 sticky top-0 z-10">
+ <div className="container mx-auto px-4 py-3 flex items-center justify-between">
+ {/* Logo */}
+ <Link href="/" className="text-xl font-bold text-primary">
+ Restaurant
+ </Link>
+
+ {/* Navigation Menu */}
+ <nav className="hidden md:flex items-center space-x-6">
+ <Link href="/" className="hover:text-primary transition-colors">
+ Home
+ </Link>
+ <Link href="/menu" className="hover:text-primary transition-colors">
+ Menu
+ </Link>
+ <Link href="/reservations" className="hover:text-primary transition-colors">
+ Reservations
+ </Link>
+ <Link href="/about" className="hover:text-primary transition-colors">
+ About
+ </Link>
+ <Link href="/contact" className="hover:text-primary transition-colors">
+ Contact
+ </Link>
+ </nav>
+
+ {/* User Actions */}
+ <div className="flex items-center space-x-4">
+ {/* Cart Icon */}
+ <Link href="/cart" className="relative">
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ className="hover:text-primary transition-colors"
+ >
+ <circle cx="8" cy="21" r="1" />
+ <circle cx="19" cy="21" r="1" />
+ <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
+ </svg>
+ {cartItemCount > 0 && (
+ <span className="absolute -top-2 -right-2 bg-primary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">
+ {cartItemCount}
+ </span>
+ )}
+ </Link>
+
+ {/* Theme Toggle */}
+ <button onClick={toggleTheme} className="hover:text-primary transition-colors">
+ {theme === 'light' ? (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+ </svg>
+ ) : (
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <circle cx="12" cy="12" r="4" />
+ <path d="M12 2v2" />
+ <path d="M12 20v2" />
+ <path d="m4.93 4.93 1.41 1.41" />
+ <path d="m17.66 17.66 1.41 1.41" />
+ <path d="M2 12h2" />
+ <path d="M20 12h2" />
+ <path d="m6.34 17.66-1.41 1.41" />
+ <path d="m19.07 4.93-1.41 1.41" />
+ </svg>
+ )}
+ </button>
+
+ {/* Auth Actions */}
+ {isAuthenticated ? (
+ <div className="relative group">
+ <button className="flex items-center hover:text-primary transition-colors">
+ <span className="mr-2">{user?.name || 'User'}</span>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="16"
+ height="16"
+ viewBox="0 0 24 24"
+ fill="none"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ >
+ <path d="m6 9 6 6 6-6" />
+ </svg>
+ </button>
+
+ {/* Dropdown Menu */}
+ <div className="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-900 rounded-md shadow-lg border border-gray-200 dark:border-slate-700 hidden group-hover:block">
+ <div className="py-1">
+ <Link
+ href="/profile"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-800"
+ >
+ Profile
+ </Link>
+ <Link
+ href="/orders"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-800"
+ >
+ Orders
+ </Link>
+ {user?.role === 'admin' && (
+ <Link
+ href="/admin"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-800"
+ >
+ Admin Dashboard
+ </Link>
+ )}
+ {user?.role === 'staff' && (
+ <Link
+ href="/staff"
+ className="block px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-800"
+ >
+ Staff Dashboard
+ </Link>
+ )}
+ <button
+ onClick={logout}
+ className="block w-full text-left px-4 py-2 hover:bg-gray-100 dark:hover:bg-slate-800 text-red-600"
+ >
+ Logout
+ </button>
+ </div>
+ </div>
+ </div>
+ ) : (
+ <div className="flex items-center space-x-4">
+ <Link
+ href="/login"
+ className="hover:text-primary transition-colors"
+ >
+ Login
+ </Link>
+ <Link
+ href="/register"
+ className="bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors"
+ >
+ Register
+ </Link>
+ </div>
+ )}
+ </div>
+ </div>
+ </header>
+
+ {/* Main Content */}
+ <main className="flex-1 container mx-auto px-4 py-8">{children}</main>
+
+ {/* Footer */}
+ <footer className="bg-white dark:bg-slate-900 border-t border-gray-200 dark:border-slate-700">
+ <div className="container mx-auto px-4 py-8">
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+ {/* Restaurant Info */}
+ <div>
+ <h3 className="text-lg font-bold mb-4">Restaurant</h3>
+ <p className="mb-2">123 Main Street</p>
+ <p className="mb-2">City, State 12345</p>
+ <p className="mb-2">Phone: (123) 456-7890</p>
+ <p>Email: [email protected]</p>
+ </div>
+
+ {/* Opening Hours */}
+ <div>
+ <h3 className="text-lg font-bold mb-4">Opening Hours</h3>
+ <p className="mb-2">Monday - Friday: 9am - 10pm</p>
+ <p className="mb-2">Saturday: 10am - 11pm</p>
+ <p>Sunday: 10am - 9pm</p>
+ </div>
+
+ {/* Quick Links */}
+ <div>
+ <h3 className="text-lg font-bold mb-4">Quick Links</h3>
+ <ul className="space-y-2">
+ <li>
+ <Link href="/menu" className="hover:text-primary transition-colors">
+ Menu
+ </Link>
+ </li>
+ <li>
+ <Link href="/reservations" className="hover:text-primary transition-colors">
+ Reservations
+ </Link>
+ </li>
+ <li>
+ <Link href="/about" className="hover:text-primary transition-colors">
+ About Us
+ </Link>
+ </li>
+ <li>
+ <Link href="/contact" className="hover:text-primary transition-colors">
+ Contact
+ </Link>
+ </li>
+ <li>
+ <Link href="/privacy" className="hover:text-primary transition-colors">
+ Privacy Policy
+ </Link>
+ </li>
+ </ul>
+ </div>
+ </div>
+
+ <div className="border-t border-gray-200 dark:border-slate-700 mt-8 pt-6 text-center">
+ <p>&copy; {new Date().getFullYear()} Restaurant. All rights reserved.</p>
+ </div>
+ </div>
+ </footer>
+ </div>
+ );
+};
+
+export default MainLayout; \ No newline at end of file
generated by cgit v1.2.3-59-g8ed1b (git 2.39.0) at 2025-06-15 23:02:06 +0000