59 lines
2.3 KiB
TypeScript
59 lines
2.3 KiB
TypeScript
import { Input } from "@/components/ui/input";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import IbanInput from "@/components/IbanInput";
|
|
import AdresseInput from "@/components/AdresseInput";
|
|
|
|
|
|
|
|
const MitgliedWerdenPage = () => {
|
|
return (
|
|
<div className="flex justify-center mt-10">
|
|
<Card className="w-full max-w-2xl">
|
|
<CardContent className="p-6">
|
|
<h1 className="text-2xl font-bold mb-4 text-center">Mitglied werden</h1>
|
|
<form className="space-y-4">
|
|
{/* Mitgliedsdaten */}
|
|
<h2 className="text-lg font-semibold">Persönliche Daten</h2>
|
|
<Input placeholder="Vorname" required />
|
|
<Input placeholder="Nachname" required />
|
|
{/*<AdresseInput /> -> Für die spätere Verwendung zum AutoComplete*/}
|
|
<Input placeholder="Straße und Hausnummer" required />
|
|
<Input placeholder="PLZ und Wohnort" required />
|
|
<Input placeholder="Telefonnummer" required />
|
|
<Input placeholder="E-Mail-Adresse" type="email" required />
|
|
<div className="flex flex-col space-y-1">
|
|
<label htmlFor="birthdate" className="text-sm font-medium text-gray-700">
|
|
Geburtsdatum*
|
|
</label>
|
|
<Input id="birthdate" type="date" required />
|
|
</div>
|
|
|
|
<div className="flex flex-col space-y-1">
|
|
<label htmlFor="entrydate" className="text-sm font-medium text-gray-700">
|
|
Eintrittsdatum*
|
|
</label>
|
|
<Input id="entrydate" type="date" required />
|
|
</div>
|
|
|
|
{/* Bankverbindung */}
|
|
<h2 className="text-lg font-semibold mt-6">Bankverbindung</h2>
|
|
<Input placeholder="Kontoinhaber (Name, Vorname)" required />
|
|
<Input placeholder="Straße und Hausnummer (falls abweichend)" />
|
|
<Input placeholder="PLZ und Wohnort (falls abweichend)" />
|
|
<IbanInput />
|
|
<Input placeholder="BIC" required />
|
|
|
|
{/* Submit Button */}
|
|
<Button type="submit" className="w-full bg-frog-500 hover:bg-frog-600 text-white mt-6">
|
|
Absenden
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MitgliedWerdenPage;
|