39 lines
1.3 KiB
TypeScript
39 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { FormState } from '../types';
|
|
import { ASSET_OPTIONS } from '../constants';
|
|
import { Checkbox } from '../components/Checkbox';
|
|
import { RepeatableList } from '../components/RepeatableList';
|
|
|
|
interface AssetsStepProps {
|
|
state: FormState;
|
|
updateState: (updates: Partial<FormState>) => void;
|
|
toggleItem: (list: string[], id: string) => string[];
|
|
}
|
|
|
|
export function AssetsStep({ state, updateState, toggleItem }: AssetsStepProps) {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{ASSET_OPTIONS.map(opt => (
|
|
<Checkbox
|
|
key={opt.id} label={opt.label} desc={opt.desc}
|
|
checked={state.assets.includes(opt.id)}
|
|
onChange={() => updateState({ assets: toggleItem(state.assets, opt.id) })}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="space-y-4">
|
|
<p className="text-sm font-bold text-slate-900">Weitere Materialien?</p>
|
|
<RepeatableList
|
|
items={state.otherAssets}
|
|
onAdd={(v) => updateState({ otherAssets: [...state.otherAssets, v] })}
|
|
onRemove={(i) => updateState({ otherAssets: state.otherAssets.filter((_, idx) => idx !== i) })}
|
|
placeholder="z.B. Stock-Fotos, Video-Footage, Präsentationen..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|