d50841c5a6
Zubereitungs-Liste mit Add + Remove als Sub-Component. Parent steuert nur noch den Wrapper und reicht steps + die zwei Callbacks rein. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
102 lines
2.2 KiB
Svelte
102 lines
2.2 KiB
Svelte
<script lang="ts">
|
|
import { Plus, Trash2 } from 'lucide-svelte';
|
|
import type { DraftStep } from './recipe-editor-types';
|
|
|
|
type Props = {
|
|
steps: DraftStep[];
|
|
onadd: () => void;
|
|
onremove: (idx: number) => void;
|
|
};
|
|
|
|
let { steps, onadd, onremove }: Props = $props();
|
|
</script>
|
|
|
|
<ol class="step-list">
|
|
{#each steps as step, idx (idx)}
|
|
<li class="step-row">
|
|
<span class="num">{idx + 1}</span>
|
|
<textarea
|
|
bind:value={step.text}
|
|
rows="3"
|
|
placeholder="Schritt beschreiben …"
|
|
></textarea>
|
|
<button class="del" type="button" aria-label="Schritt entfernen" onclick={() => onremove(idx)}>
|
|
<Trash2 size={16} strokeWidth={2} />
|
|
</button>
|
|
</li>
|
|
{/each}
|
|
</ol>
|
|
<button class="add" type="button" onclick={onadd}>
|
|
<Plus size={16} strokeWidth={2} />
|
|
<span>Schritt hinzufügen</span>
|
|
</button>
|
|
|
|
<style>
|
|
.step-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 0 0.6rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.4rem;
|
|
}
|
|
.step-row {
|
|
display: grid;
|
|
grid-template-columns: 32px 1fr 40px;
|
|
gap: 0.5rem;
|
|
align-items: start;
|
|
}
|
|
.num {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: #2b6a3d;
|
|
color: white;
|
|
border-radius: 50%;
|
|
display: grid;
|
|
place-items: center;
|
|
font-weight: 600;
|
|
font-size: 0.9rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
.step-row textarea {
|
|
padding: 0.55rem 0.7rem;
|
|
border: 1px solid #cfd9d1;
|
|
border-radius: 8px;
|
|
font-size: 0.95rem;
|
|
font-family: inherit;
|
|
resize: vertical;
|
|
min-height: 70px;
|
|
}
|
|
.del {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 1px solid #f1b4b4;
|
|
background: white;
|
|
color: #c53030;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.del:hover {
|
|
background: #fdf3f3;
|
|
}
|
|
.add {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.35rem;
|
|
padding: 0.55rem 0.9rem;
|
|
border: 1px dashed #cfd9d1;
|
|
background: white;
|
|
color: #2b6a3d;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-family: inherit;
|
|
}
|
|
.add:hover {
|
|
background: #f4f8f5;
|
|
}
|
|
</style>
|