refactor(ui): remove History link and add footer to authenticated pages
- Remove History navigation link from both desktop and mobile navbar - Create dedicated Footer component for authenticated users - Add Footer to Layout component used on Dashboard and other protected pages - Footer includes platform navigation, support links, and legal section
This commit is contained in:
88
frontend/src/components/layout/Footer.jsx
Normal file
88
frontend/src/components/layout/Footer.jsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import { Video } from 'lucide-react';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="bg-white border-t border-gray-200 mt-auto">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-center space-x-2 mb-4">
|
||||||
|
<Video className="w-5 h-5 text-primary-600" />
|
||||||
|
<span className="font-bold text-gray-900">spotlight.cam</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm text-gray-600">
|
||||||
|
Video collaboration for West Coast Swing dancers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Platform</h3>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<Link to="/dashboard" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Dashboard
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/events" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Events
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/matches" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Matches
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/profile" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Profile
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Support</h3>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<Link to="/how-it-works" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
How It Works
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/about-us" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
About Us
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Link to="/contact" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Contact
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-3">Legal</h3>
|
||||||
|
<ul className="space-y-2 text-sm">
|
||||||
|
<li>
|
||||||
|
<Link to="/privacy" className="text-gray-600 hover:text-primary-600 transition">
|
||||||
|
Privacy Policy
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="border-t border-gray-200 mt-8 pt-6 text-center">
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
© {new Date().getFullYear()} spotlight.cam. All rights reserved.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -1,4 +1,5 @@
|
|||||||
import Navbar from './Navbar';
|
import Navbar from './Navbar';
|
||||||
|
import Footer from './Footer';
|
||||||
|
|
||||||
const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = null }) => {
|
const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = null }) => {
|
||||||
const mainClasses = fullWidth || noPadding
|
const mainClasses = fullWidth || noPadding
|
||||||
@@ -11,6 +12,7 @@ const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = nu
|
|||||||
<main className={mainClasses}>
|
<main className={mainClasses}>
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -124,14 +124,6 @@ const Navbar = ({ pageTitle = null }) => {
|
|||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
<Link
|
|
||||||
to="/history"
|
|
||||||
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<History className="w-4 h-4" />
|
|
||||||
<span>History</span>
|
|
||||||
</Link>
|
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
to="/profile"
|
to="/profile"
|
||||||
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
|
className="flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-primary-600 hover:bg-gray-100"
|
||||||
@@ -249,13 +241,6 @@ const Navbar = ({ pageTitle = null }) => {
|
|||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
|
||||||
to="/history"
|
|
||||||
onClick={() => setMenuOpen(false)}
|
|
||||||
className="flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-100"
|
|
||||||
>
|
|
||||||
<History className="w-4 h-4" /> History
|
|
||||||
</Link>
|
|
||||||
<Link
|
<Link
|
||||||
to="/profile"
|
to="/profile"
|
||||||
onClick={() => setMenuOpen(false)}
|
onClick={() => setMenuOpen(false)}
|
||||||
|
|||||||
Reference in New Issue
Block a user