46 lines
2.0 KiB
TypeScript
46 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { FormState } from '../types';
|
|
import { AlertCircle } from 'lucide-react';
|
|
|
|
interface TimelineStepProps {
|
|
state: FormState;
|
|
updateState: (updates: Partial<FormState>) => void;
|
|
}
|
|
|
|
export function TimelineStep({ state, updateState }: TimelineStepProps) {
|
|
return (
|
|
<div className="space-y-12">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
{[
|
|
{ id: 'asap', label: 'So schnell wie möglich', desc: 'Priorisierter Start gewünscht.' },
|
|
{ id: '2-3-months', label: 'In 2-3 Monaten', desc: 'Normaler Projektvorlauf.' },
|
|
{ id: '3-6-months', label: 'In 3-6 Monaten', desc: 'Langfristige Planung.' },
|
|
{ id: 'flexible', label: 'Flexibel', desc: 'Kein fester Termindruck.' },
|
|
].map(opt => (
|
|
<button
|
|
key={opt.id}
|
|
type="button"
|
|
onClick={() => updateState({ deadline: opt.id })}
|
|
className={`p-10 rounded-[2.5rem] border-2 text-left transition-all focus:outline-none overflow-hidden relative ${
|
|
state.deadline === opt.id ? 'border-slate-900 bg-slate-900 text-white' : 'border-slate-100 bg-white hover:border-slate-200'
|
|
}`}
|
|
>
|
|
<h4 className={`text-2xl font-bold mb-2 ${state.deadline === opt.id ? 'text-white' : 'text-slate-900'}`}>{opt.label}</h4>
|
|
<p className={`text-lg ${state.deadline === opt.id ? 'text-slate-200' : 'text-slate-500'}`}>{opt.desc}</p>
|
|
</button>
|
|
))}
|
|
</div>
|
|
{state.deadline === 'asap' && (
|
|
<div className="p-8 bg-slate-50 rounded-[2rem] border border-slate-100 flex gap-6 items-start">
|
|
<AlertCircle className="text-slate-900 shrink-0 mt-1" size={28} />
|
|
<p className="text-base text-slate-600 leading-relaxed">
|
|
<strong>Hinweis:</strong> Bei sehr kurzfristigen Deadlines kann ein Express-Zuschlag anfallen, um die Kapazitäten entsprechend zu priorisieren.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|