36 lines
1.2 KiB
JavaScript
36 lines
1.2 KiB
JavaScript
import { Link } from 'react-router-dom';
|
|
import CategoryBadge from './CategoryBadge';
|
|
|
|
export default function RecipeCard({ recipe }) {
|
|
return (
|
|
<Link
|
|
to={`/recipe/${recipe.id}`}
|
|
className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
|
|
>
|
|
{recipe.thumbnail_url && (
|
|
<img
|
|
src={recipe.thumbnail_url}
|
|
alt={recipe.name}
|
|
className="w-full h-48 object-cover"
|
|
/>
|
|
)}
|
|
<div className="p-4">
|
|
<div className="flex items-start justify-between gap-2 mb-2">
|
|
<h3 className="font-semibold text-lg leading-tight">{recipe.name}</h3>
|
|
<CategoryBadge category={recipe.category} />
|
|
</div>
|
|
{recipe.description && (
|
|
<p className="text-gray-500 text-sm line-clamp-2 mb-2">
|
|
{recipe.description}
|
|
</p>
|
|
)}
|
|
<div className="flex items-center gap-4 text-xs text-gray-400">
|
|
{recipe.tiktok_author && <span>@{recipe.tiktok_author}</span>}
|
|
<span>{recipe.ingredients?.length || 0} Zutaten</span>
|
|
<span>{recipe.steps?.length || 0} Schritte</span>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|