init push
This commit is contained in:
nadja
28
frontend/src/components/CategoryBadge.jsx
Normal file
28
frontend/src/components/CategoryBadge.jsx
Normal file
@@ -0,0 +1,28 @@
|
||||
const CATEGORY_COLORS = {
|
||||
'Frühstück': 'bg-yellow-100 text-yellow-800',
|
||||
'Hauptgericht': 'bg-red-100 text-red-800',
|
||||
'Dessert': 'bg-pink-100 text-pink-800',
|
||||
'Snack': 'bg-green-100 text-green-800',
|
||||
'Getränk': 'bg-blue-100 text-blue-800',
|
||||
'Sonstiges': 'bg-gray-100 text-gray-800',
|
||||
};
|
||||
|
||||
const CATEGORY_ICONS = {
|
||||
'Frühstück': '🍳',
|
||||
'Hauptgericht': '🍽️',
|
||||
'Dessert': '🍰',
|
||||
'Snack': '🍿',
|
||||
'Getränk': '🥤',
|
||||
'Sonstiges': '📋',
|
||||
};
|
||||
|
||||
export default function CategoryBadge({ category }) {
|
||||
const colorClass = CATEGORY_COLORS[category] || CATEGORY_COLORS['Sonstiges'];
|
||||
const icon = CATEGORY_ICONS[category] || CATEGORY_ICONS['Sonstiges'];
|
||||
|
||||
return (
|
||||
<span className={`text-xs font-medium px-2 py-1 rounded-full whitespace-nowrap ${colorClass}`}>
|
||||
{icon} {category}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
82
frontend/src/components/IngredientList.jsx
Normal file
82
frontend/src/components/IngredientList.jsx
Normal file
@@ -0,0 +1,82 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function IngredientList({ ingredients, editable, onChange }) {
|
||||
const [checked, setChecked] = useState({});
|
||||
|
||||
const toggle = (i) => setChecked(prev => ({ ...prev, [i]: !prev[i] }));
|
||||
|
||||
const updateIngredient = (i, field, value) => {
|
||||
const updated = ingredients.map((ing, idx) =>
|
||||
idx === i ? { ...ing, [field]: value } : ing
|
||||
);
|
||||
onChange(updated);
|
||||
};
|
||||
|
||||
const addIngredient = () => {
|
||||
onChange([...ingredients, { name: '', amount: '', unit: '' }]);
|
||||
};
|
||||
|
||||
const removeIngredient = (i) => {
|
||||
onChange(ingredients.filter((_, idx) => idx !== i));
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-3">Zutaten</h3>
|
||||
<ul className="space-y-2">
|
||||
{ingredients.map((ing, i) => (
|
||||
<li key={i} className="flex items-center gap-2">
|
||||
{!editable && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={!!checked[i]}
|
||||
onChange={() => toggle(i)}
|
||||
className="w-4 h-4 accent-blue-600"
|
||||
/>
|
||||
)}
|
||||
{editable ? (
|
||||
<>
|
||||
<input
|
||||
type="text"
|
||||
value={ing.amount}
|
||||
onChange={e => updateIngredient(i, 'amount', e.target.value)}
|
||||
placeholder="Menge"
|
||||
className="w-16 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={ing.unit}
|
||||
onChange={e => updateIngredient(i, 'unit', e.target.value)}
|
||||
placeholder="Einheit"
|
||||
className="w-14 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={ing.name}
|
||||
onChange={e => updateIngredient(i, 'name', e.target.value)}
|
||||
placeholder="Zutat"
|
||||
className="flex-1 px-2 py-1 border border-gray-300 rounded text-sm"
|
||||
/>
|
||||
<button onClick={() => removeIngredient(i)} className="text-red-400 hover:text-red-600 text-lg">×</button>
|
||||
</>
|
||||
) : (
|
||||
<span className={`${checked[i] ? 'line-through text-gray-400' : ''}`}>
|
||||
{ing.amount && `${ing.amount} `}
|
||||
{ing.unit && `${ing.unit} `}
|
||||
{ing.name}
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{editable && (
|
||||
<button
|
||||
onClick={addIngredient}
|
||||
className="mt-2 text-sm text-blue-600 hover:text-blue-700 font-medium"
|
||||
>
|
||||
+ Zutat hinzufügen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
frontend/src/components/RecipeCard.jsx
Normal file
35
frontend/src/components/RecipeCard.jsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
76
frontend/src/components/StepList.jsx
Normal file
76
frontend/src/components/StepList.jsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import { useState } from 'react';
|
||||
|
||||
export default function StepList({ steps, editable, onChange }) {
|
||||
const [completed, setCompleted] = useState({});
|
||||
|
||||
const toggle = (i) => setCompleted(prev => ({ ...prev, [i]: !prev[i] }));
|
||||
|
||||
const updateStep = (i, value) => {
|
||||
const updated = steps.map((s, idx) => (idx === i ? value : s));
|
||||
onChange(updated);
|
||||
};
|
||||
|
||||
const addStep = () => onChange([...steps, '']);
|
||||
|
||||
const removeStep = (i) => onChange(steps.filter((_, idx) => idx !== i));
|
||||
|
||||
const moveStep = (i, direction) => {
|
||||
const arr = [...steps];
|
||||
const j = i + direction;
|
||||
if (j < 0 || j >= arr.length) return;
|
||||
[arr[i], arr[j]] = [arr[j], arr[i]];
|
||||
onChange(arr);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg mb-3">Zubereitung</h3>
|
||||
<ol className="space-y-3">
|
||||
{steps.map((step, i) => (
|
||||
<li key={i} className="flex items-start gap-3">
|
||||
{!editable && (
|
||||
<button
|
||||
onClick={() => toggle(i)}
|
||||
className={`mt-1 w-6 h-6 rounded-full border-2 flex-shrink-0 flex items-center justify-center text-xs font-bold transition-colors ${
|
||||
completed[i]
|
||||
? 'bg-blue-600 border-blue-600 text-white'
|
||||
: 'border-gray-300 text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{completed[i] ? '✓' : i + 1}
|
||||
</button>
|
||||
)}
|
||||
{editable ? (
|
||||
<div className="flex-1 flex gap-2">
|
||||
<span className="mt-2 text-sm font-bold text-gray-400 w-5">{i + 1}.</span>
|
||||
<textarea
|
||||
value={step}
|
||||
onChange={e => updateStep(i, e.target.value)}
|
||||
rows={2}
|
||||
className="flex-1 px-2 py-1 border border-gray-300 rounded text-sm resize-none"
|
||||
/>
|
||||
<div className="flex flex-col gap-1">
|
||||
<button onClick={() => moveStep(i, -1)} className="text-gray-400 hover:text-gray-600 text-xs">↑</button>
|
||||
<button onClick={() => moveStep(i, 1)} className="text-gray-400 hover:text-gray-600 text-xs">↓</button>
|
||||
<button onClick={() => removeStep(i)} className="text-red-400 hover:text-red-600 text-xs">×</button>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<p className={`${completed[i] ? 'line-through text-gray-400' : ''}`}>
|
||||
{step}
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
{editable && (
|
||||
<button
|
||||
onClick={addStep}
|
||||
className="mt-2 text-sm text-blue-600 hover:text-blue-700 font-medium"
|
||||
>
|
||||
+ Schritt hinzufügen
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user