39 lines
1.4 KiB
TypeScript
39 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { FormState } from '../types';
|
|
import { Checkbox } from '../components/Checkbox';
|
|
import { RepeatableList } from '../components/RepeatableList';
|
|
import { FEATURE_OPTIONS } from '../constants';
|
|
|
|
interface FeaturesStepProps {
|
|
state: FormState;
|
|
updateState: (updates: Partial<FormState>) => void;
|
|
toggleItem: (list: string[], id: string) => string[];
|
|
}
|
|
|
|
export function FeaturesStep({ state, updateState, toggleItem }: FeaturesStepProps) {
|
|
return (
|
|
<div className="space-y-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{FEATURE_OPTIONS.map(opt => (
|
|
<Checkbox
|
|
key={opt.id} label={opt.label} desc={opt.desc}
|
|
checked={state.features.includes(opt.id)}
|
|
onChange={() => updateState({ features: toggleItem(state.features, opt.id) })}
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="space-y-6">
|
|
<p className="text-lg font-bold text-slate-900">Weitere inhaltliche Module?</p>
|
|
<RepeatableList
|
|
items={state.otherFeatures}
|
|
onAdd={(v) => updateState({ otherFeatures: [...state.otherFeatures, v] })}
|
|
onRemove={(i) => updateState({ otherFeatures: state.otherFeatures.filter((_, idx) => idx !== i) })}
|
|
placeholder="z.B. Glossar, Download-Center, Partner-Bereich..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|