60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { useState } from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { toast } from "sonner";
|
|
|
|
export const PetitionForm = () => {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
email: "",
|
|
comment: "",
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
// In a real application, this would submit to a backend
|
|
toast.success("Thank you for signing! Your voice matters.");
|
|
setFormData({ name: "", email: "", comment: "" });
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="space-y-4 max-w-xl mx-auto">
|
|
<div>
|
|
<Input
|
|
placeholder="Your Name"
|
|
value={formData.name}
|
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
|
required
|
|
className="bg-background border-border"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Input
|
|
type="email"
|
|
placeholder="Your Email"
|
|
value={formData.email}
|
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
|
required
|
|
className="bg-background border-border"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Textarea
|
|
placeholder="Why is Victoria Way Carpark important to you? (Optional)"
|
|
value={formData.comment}
|
|
onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
|
|
className="bg-background border-border min-h-24"
|
|
/>
|
|
</div>
|
|
<Button
|
|
type="submit"
|
|
size="lg"
|
|
className="w-full bg-gradient-to-r from-accent to-accent/90 hover:from-accent/90 hover:to-accent/80 text-accent-foreground shadow-[var(--shadow-elevated)] font-semibold"
|
|
>
|
|
Sign the Petition
|
|
</Button>
|
|
</form>
|
|
);
|
|
};
|