65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
|
import { Link, useLocation } from 'react-router-dom';
|
|||
|
|
|
|||
|
|
const RecipeBookTabs = () => {
|
|||
|
|
const location = useLocation();
|
|||
|
|
|
|||
|
|
const tabs = [
|
|||
|
|
{ id: '/', label: 'All Recipes', icon: '📚' },
|
|||
|
|
{ id: '/recipe/', label: 'Recipe', icon: '🥗' },
|
|||
|
|
{ id: '/add-recipe', label: 'Add Recipe', icon: '➕' },
|
|||
|
|
{ id: '/about', label: 'About', icon: '🍽️' },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="bg-gradient-to-b from-amber-50 to-orange-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
|||
|
|
{/* Navigation Tabs */}
|
|||
|
|
<div className="relative h-full">
|
|||
|
|
{/* Tab Background Line */}
|
|||
|
|
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
|
|||
|
|
|
|||
|
|
{/* Tabs Container */}
|
|||
|
|
<div className="flex space-x-1 px-6 pt-4 h-full items-end justify-center">
|
|||
|
|
{tabs.map((tab) => {
|
|||
|
|
const isActive = location.pathname === tab.id || (location.pathname.startsWith(tab.id) && tab.id === "/recipe/");
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Link
|
|||
|
|
key={tab.id}
|
|||
|
|
to={tab.id}
|
|||
|
|
className={`
|
|||
|
|
relative px-6 py-3 rounded-t-lg font-medium text-sm transform
|
|||
|
|
${isActive
|
|||
|
|
? 'bg-amber-100 text-amber-800 scale-105 z-10 border-t-2 border-amber-200'
|
|||
|
|
: 'bg-amber-200 text-amber-600 hover:bg-amber-100 hover:text-amber-700 hover:scale-102 shadow-sm'
|
|||
|
|
}
|
|||
|
|
before:absolute before:bottom-0 before:left-0 before:right-0 before:h-0.5
|
|||
|
|
${isActive ? '' : ''}
|
|||
|
|
`}
|
|||
|
|
>
|
|||
|
|
<div className="flex items-center space-x-2">
|
|||
|
|
<span className="text-lg">{tab.icon}</span>
|
|||
|
|
<span>{tab.label}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Tab Shadow Effect */}
|
|||
|
|
{isActive && (
|
|||
|
|
<>
|
|||
|
|
<div className="absolute -left-2 bottom-0 w-2 h-2 bg-white">
|
|||
|
|
<div className="absolute top-0 left-0 w-2 h-2 bg-amber-200 rounded-br-lg"></div>
|
|||
|
|
</div>
|
|||
|
|
<div className="absolute -right-2 bottom-0 w-2 h-2 bg-white">
|
|||
|
|
<div className="absolute top-0 right-0 w-2 h-2 bg-amber-200 rounded-bl-lg"></div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</Link>
|
|||
|
|
);
|
|||
|
|
})}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default RecipeBookTabs;
|