93 lines
3.4 KiB
TypeScript
93 lines
3.4 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { Link, useLocation } from 'react-router-dom';
|
||
import { getRecipes } from "../services/frontendApi.js";
|
||
|
||
const RecipeBookTabs = () => {
|
||
const location = useLocation();
|
||
const [lastViewedRecipeId, setLastViewedRecipeId] = useState<number | null>(null);
|
||
|
||
const loadRandomRecipeId = async () => {
|
||
try {
|
||
const recipes = await getRecipes();
|
||
if (recipes.length > 0) {
|
||
const randomIndex = Math.floor(Math.random() * recipes.length);
|
||
setLastViewedRecipeId(recipes[randomIndex].id);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error loading recipes:', error);
|
||
}
|
||
};
|
||
|
||
// update lastViewedRecipe id if we navigate to /recipe/${id}
|
||
useEffect(() => {
|
||
const match = /^\/recipe\/(\d+)$/.exec(location.pathname);
|
||
if (match) {
|
||
setLastViewedRecipeId(parseInt(match[1]));
|
||
}
|
||
}, [location.pathname, lastViewedRecipeId]);
|
||
|
||
// choose random recipe on first load
|
||
useEffect(() => {
|
||
if (!lastViewedRecipeId) {
|
||
loadRandomRecipeId();
|
||
}
|
||
}, []);
|
||
|
||
|
||
const tabs = [
|
||
{ id: '/', label: 'Cookbook', icon: '📚' },
|
||
{ id: `/recipe/${lastViewedRecipeId}`, label: 'Recipe', icon: '🥗' },
|
||
{ id: '/add-recipe', label: 'Add', icon: '➕' },
|
||
{ id: '/about', label: 'About', icon: '🍽️' },
|
||
];
|
||
|
||
return (
|
||
<div className="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
|
||
<div className="relative h-full">
|
||
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-amber-200"></div>
|
||
|
||
<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-3 py-2 md:px-6 md:py-3 rounded-t-lg font-bold text-sm transform text-amber-800
|
||
${isActive
|
||
? 'bg-amber-100 scale-105 z-10 border-t-2 border-amber-200'
|
||
: 'bg-amber-200 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">
|
||
<span className={`text-lg pr-2 ${window.innerWidth <= 640 ? 'hidden' : ''}`}>{tab.icon}</span>
|
||
<span>{tab.label}</span>
|
||
</div>
|
||
|
||
{
|
||
isActive && (
|
||
<>
|
||
<div className={`absolute -left-2 bottom-0 w-2 h-2 bg-white ${location.pathname === '/' ? 'hidden' : ''}`}>
|
||
<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 ${location.pathname === '/about' ? 'hidden' : ''}`}>
|
||
<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;
|