radziel/spotlightcam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): remove History link and add footer to authenticated pages

Browse Source 
- 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:
Radosław Gierwiało
2025-12-06 12:09:33 +01:00
parent c7e577bf12
commit 4066bf1081
3 changed files with 90 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
frontend/src/components/layout/Footer.jsx Normal file
View 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">
&copy; {new Date().getFullYear()} spotlight.cam. All rights reserved.
</p>
</div>
</div>
</footer>
);
};
export default Footer;

2
frontend/src/components/layout/Layout.jsx
View File

@@ -1,4 +1,5 @@
import Navbar from './Navbar';
import Footer from './Footer';
const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = null }) => {
const mainClasses = fullWidth || noPadding
@@ -11,6 +12,7 @@ const Layout = ({ children, fullWidth = false, noPadding = false, pageTitle = nu
<main className={mainClasses}>
{children}
</main>
<Footer />
</div>
);
};

15
frontend/src/components/layout/Navbar.jsx
View File

@@ -124,14 +124,6 @@ const Navbar = ({ pageTitle = null }) => {
)}
</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
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"
@@ -249,13 +241,6 @@ const Navbar = ({ pageTitle = null }) => {
</span>
)}
</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
to="/profile"
onClick={() => setMenuOpen(false)}