Skip to content

Legger til avhuking med strek over på steg, og mer luft mellom stegene (#107) #109

Merged
merged 1 commit into from
Oct 15, 2026
Merged

Legger til avhuking med strek over på steg, og mer luft mellom stegene (#107) #109

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions client/src/components/recipe/RecipeDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,20 @@ type RecipeDetailProps = {
export function RecipeDetail({ recipe }: RecipeDetailProps) {
const [checkedIds, setCheckedIds] = useState<String[]>([]);

function toggeIngredient(id: string) {
function toggleIngredient(id: string) {
setCheckedIds((prev)=>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
}

const [checkedStepIds, setCheckedStepIds] = useState<String[]>([]);

function toggleStep(id:string) {
setCheckedStepIds((prev) =>
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
);
}

return (
<article className="grid md:grid-cols-2 gap-6">
<section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
Expand Down Expand Up @@ -49,8 +57,8 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
<p>{recipe.description}</p>
</div>
<div className="flex justify-between">
<p className="border border-olive rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
<p className="border border-olive rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
<p className="rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
<p className="rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
</div>
</section>
<section className="rounded-lg">
Expand All @@ -65,7 +73,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
control={
<Checkbox
checked={checkedIds.includes(ingredient.id)}
onChange={() => toggeIngredient(ingredient.id)}
onChange={() => toggleIngredient(ingredient.id)}
sx={{
color: 'var(--color-primary)',
'&.Mui-checked': { color: 'var(--color-primary)' },
Expand All @@ -84,19 +92,25 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
</section>
<section className="border border-olive bg-background rounded-lg p-4">
<h2 className="text-2xl font-semibold">Steg</h2>
<ol>
<ol className="flex flex-col gap-3">
{recipe.steps.map((step) => (
<li key={step.id}>
<FormControlLabel
control={
<Checkbox
checked={checkedStepIds.includes(step.id)}
onChange={() => toggleStep(step.id)}
sx={{
color: 'var(--color-primary)',
'&.Mui-checked': { color: 'var(--color-primary)' },
}}
/>
}
label={`${step.order}. ${step.instruction}`}
label={
<span className={checkedStepIds.includes(step.id) ? 'line-through opacity-60' : ''}>
{`${step.order}. ${step.instruction}`}
</span>
}
labelPlacement="start"
sx={{ width: '100%', justifyContent: 'space-between', ml: 0 }}
/>
Expand Down