init push

frontend/src/components/RecipeCard.jsx

@@ -0,0 +1,35 @@
+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>
+  );
+}