b738bc7495
- Added package.json with dependencies for Next.js, React, and Tailwind CSS. - Created postcss.config.js for Tailwind CSS and autoprefixer integration. - Added SVG icon for the application in public/icons/icon.svg. - Created manifest.json for PWA support with app details and icon. - Configured Tailwind CSS in tailwind.config.js with custom colors and animations. - Set up TypeScript configuration in tsconfig.json for strict type checking and module resolution.
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { List, Map, Settings } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const navItems = [
|
|
{ href: '/', label: 'List', icon: List },
|
|
{ href: '/map/', label: 'Map', icon: Map },
|
|
{ href: '/settings/', label: 'Settings', icon: Settings },
|
|
];
|
|
|
|
export default function BottomNav() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 safe-bottom shadow-lg">
|
|
<div className="flex justify-around items-center h-16">
|
|
{navItems.map((item) => {
|
|
const Icon = item.icon;
|
|
const isActive = pathname === item.href;
|
|
|
|
return (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'flex flex-col items-center justify-center flex-1 h-full touch-manipulation',
|
|
'active:scale-95 transition-transform duration-150',
|
|
isActive ? 'text-primary-600' : 'text-gray-500'
|
|
)}
|
|
>
|
|
<Icon
|
|
size={22}
|
|
strokeWidth={isActive ? 2.5 : 2}
|
|
className={cn(
|
|
'transition-colors duration-200',
|
|
isActive && 'drop-shadow-sm'
|
|
)}
|
|
/>
|
|
<span
|
|
className={cn(
|
|
'text-[10px] mt-0.5 font-medium transition-colors duration-200',
|
|
isActive ? 'text-primary-600' : 'text-gray-400'
|
|
)}
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|