mmintel/mintel.me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form

Browse Source
This commit is contained in:
Marc Mintel
2026-01-30 10:35:31 +01:00
parent ba08724a52
commit cea56ac58d
60 changed files with 1922 additions and 1305 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/ContactForm/steps/ContactStep.tsx Normal file
View File

@@ -0,0 +1,77 @@
'use client';
import * as React from 'react';
import { FormState } from '../types';
import { FileText, Upload, X } from 'lucide-react';
interface ContactStepProps {
state: FormState;
updateState: (updates: Partial<FormState>) => void;
}
export function ContactStep({ state, updateState }: ContactStepProps) {
return (
<div className="space-y-8">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<input type="text" placeholder="Ihr Name" required value={state.name} onChange={(e) => updateState({ name: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
<input type="email" placeholder="Ihre Email" required value={state.email} onChange={(e) => updateState({ email: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
</div>
<input type="text" placeholder="Ihre Rolle (z.B. CEO, Marketing Manager...)" value={state.role} onChange={(e) => updateState({ role: e.target.value })} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors rounded-[2rem]" />
<textarea placeholder="Erzählen Sie mir kurz von Ihrem Projekt..." value={state.message} onChange={(e) => updateState({ message: e.target.value })} rows={4} className="w-full p-8 bg-white border border-slate-100 rounded-[2rem] focus:outline-none focus:border-slate-900 transition-colors resize-none rounded-[2rem]" />
<div className="space-y-4">
<p className="text-sm font-bold text-slate-900">Dateien hochladen (optional)</p>
<div
className={`relative group border-2 border-dashed rounded-[2rem] p-8 transition-all duration-300 flex flex-col items-center justify-center gap-4 cursor-pointer min-h-[160px] rounded-[2rem] ${
state.contactFiles.length > 0 ? 'border-slate-900 bg-slate-50' : 'border-slate-200 hover:border-slate-400 bg-white'
}`}
onDragOver={(e) => { e.preventDefault(); e.stopPropagation(); }}
onDrop={(e) => {
e.preventDefault();
e.stopPropagation();
const files = Array.from(e.dataTransfer.files);
if (files.length > 0) updateState({ contactFiles: [...state.contactFiles, ...files] });
}}
onClick={() => document.getElementById('contact-upload')?.click()}
>
<input id="contact-upload" type="file" multiple className="hidden" onChange={(e) => {
const files = e.target.files ? Array.from(e.target.files) : [];
if (files.length > 0) updateState({ contactFiles: [...state.contactFiles, ...files] });
}} />
{state.contactFiles.length > 0 ? (
<div className="w-full space-y-2">
{state.contactFiles.map((file, idx) => (
<div key={idx} className="flex items-center justify-between p-3 bg-white border border-slate-100 rounded-xl shadow-sm">
<div className="flex items-center gap-3 text-slate-900">
<FileText size={20} className="text-slate-400" />
<span className="font-bold text-sm truncate max-w-[200px]">{file.name}</span>
</div>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
updateState({ contactFiles: state.contactFiles.filter((_, i) => i !== idx) });
}}
className="p-1 hover:bg-slate-100 rounded-full transition-colors focus:outline-none overflow-hidden relative rounded-full"
>
<X size={16} />
</button>
</div>
))}
<p className="text-[10px] text-slate-400 text-center mt-4">Klicken oder ziehen, um weitere Dateien hinzuzufügen</p>
</div>
) : (
<>
<Upload size={32} className="text-slate-400 group-hover:text-slate-900 transition-colors" />
<div className="text-center">
<p className="text-sm font-bold text-slate-900">Dateien hierher ziehen</p>
<p className="text-xs text-slate-500 mt-1">oder klicken zum Auswählen</p>
</div>
</>
)}
</div>
</div>
</div>
);
}