24 lines
965 B
TypeScript
24 lines
965 B
TypeScript
import { type RecipeSmall } from "../types/Recipe"
|
|
import { Link } from 'react-router-dom';
|
|
import StarRating from '../components/StarRating.tsx'
|
|
import TimeDisplay from "../components/TimeDisplay.tsx"
|
|
|
|
function CookbookRecipeTile({ recipe }: { recipe: RecipeSmall }) {
|
|
|
|
return (
|
|
<div className="recipe-card m-2 bg-amber-200 p-4 rounded shadow">
|
|
<div className="flex justify-between items-center recipe-name">
|
|
<h3 className="font-bold text-xl"><Link to={`/recipe/${recipe.id}`} className="text-blue-500">{recipe.name}</Link></h3>
|
|
<div className="ar-button bg-amber-600 text-white py-0 px-2 rounded m-2">
|
|
{recipe.cuisine}
|
|
</div>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
⏰ <TimeDisplay minutes={recipe.prep_minutes + recipe.cook_minutes} />
|
|
<StarRating rating={recipe.stars} onRatingChange={() => { }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CookbookRecipeTile;
|