form

src/components/ContactForm/steps/AssetsStep.tsx

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