fred/recipe_app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

prep/cook times and some fit and finish

Browse source
This commit is contained in:
fred 2025-07-29 09:34:33 -07:00
parent a3b0fffe45
commit 9656888cb7
14 changed files with 141 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

47
frontend/src/components/RecipeBookTabs.tsx
View file

@ -1,23 +1,55 @@
import React from 'react';
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();
} else {
console.log('id found', lastViewedRecipeId)
}
}, []);
const tabs = [
{ id: '/', label: 'All Recipes', icon: '📚' },
{ id: '/recipe/', label: 'Recipe', icon: '🥗' },
{ id: `/recipe/${lastViewedRecipeId}`, 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="bg-amber-50 h-16 flex-shrink-0 rounded-tl-lg rounded-tr-lg">
<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/");
@ -41,13 +73,12 @@ const RecipeBookTabs = () => {
<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 -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">
<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>
</>