38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import { NavLink } from 'react-router-dom';
|
|
import { Home, PlusSquare, User, CircleUser } from 'lucide-react';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { cn } from '../lib/utils';
|
|
|
|
const navItems = [
|
|
{ path: '/', icon: Home, label: 'Feed' },
|
|
{ path: '/create', icon: PlusSquare, label: 'Create' },
|
|
{ path: '/profile', icon: User, label: 'Profile' },
|
|
];
|
|
|
|
export default function NavigationBar() {
|
|
const { user } = useAuth();
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 h-16 bg-canvas border-t border-hairline z-50">
|
|
<div className="max-w-md mx-auto h-full flex justify-around items-center">
|
|
{navItems.map((item) => {
|
|
const path = item.path === '/profile' && user?.username ? `/profile/${user.username}` : item.path;
|
|
return (
|
|
<NavLink
|
|
key={item.path}
|
|
to={path}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
'flex flex-col items-center justify-center text-muted-soft transition-colors',
|
|
isActive && 'text-ink'
|
|
)
|
|
}
|
|
>
|
|
<item.icon className="h-6 w-6" strokeWidth={2} />
|
|
</NavLink>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |