59 lines
2.2 KiB
TypeScript
59 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Film, Heart, Users, Settings } from 'lucide-react';
|
|
import { useAppContext } from '../store/AppContext';
|
|
|
|
export const Navbar: React.FC = () => {
|
|
const location = useLocation();
|
|
const { user, matches } = useAppContext();
|
|
|
|
const navItems = [
|
|
{ path: '/', icon: Users, label: 'Partner' },
|
|
{ path: '/swipe', icon: Film, label: 'Discover' },
|
|
{ path: '/matches', icon: Heart, label: 'Matches', badge: matches.length },
|
|
{ path: '/settings', icon: Settings, label: 'Settings', requiresAuth: true },
|
|
];
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 w-full bg-surface border-t border-border pb-safe">
|
|
<div className="flex justify-around items-center h-16 max-w-md mx-auto">
|
|
{navItems.map(({ path, icon: Icon, label, badge, requiresAuth }) => {
|
|
const isActive = location.pathname === path;
|
|
const isDisabled = requiresAuth && !user;
|
|
|
|
if (isDisabled) {
|
|
return (
|
|
<div
|
|
key={path}
|
|
className="flex flex-col items-center justify-center w-full h-full space-y-1 text-slate-600 cursor-not-allowed"
|
|
>
|
|
<Icon size={24} />
|
|
<span className="text-xs font-medium">{label}</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Link
|
|
key={path}
|
|
to={path}
|
|
className={`flex flex-col items-center justify-center w-full h-full space-y-1 ${
|
|
isActive ? 'text-primary' : 'text-slate-400 hover:text-slate-200'
|
|
}`}
|
|
>
|
|
<div className="relative">
|
|
<Icon size={24} />
|
|
{badge !== undefined && badge > 0 && (
|
|
<span className="absolute -top-2 -right-2 bg-primary text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
|
|
{badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<span className="text-xs font-medium">{label}</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
};
|