cardosofelipe/eventspace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update rsvp-form.tsx style
Some checks failed
Build and Push Docker Images / build-frontend (push) Failing after 52s
Details
Build and Push Docker Images / changes (push) Successful in 4s
Details
Build and Push Docker Images / build-backend (push) Has been skipped
Details

Browse Source
This commit is contained in:
Felipe Cardoso
2025-03-16 11:04:32 +01:00
parent 551a7ba9dc
commit 121cbcb42a
1 changed files with 78 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
frontend/src/components/rsvp/rsvp-form.tsx
View File

@@ -50,76 +50,86 @@ export const RSVP: React.FC<RSVPProps> = ({
}; };
return ( return (
<form <div className="w-full bg-card text-card-foreground rounded-lg border shadow-sm">
onSubmit={submitRsvp} <div className="p-6 flex flex-col gap-6">
className="rounded-lg bg-white p-6 flex flex-col gap-5" <div>
> <h2 className="text-lg font-medium">RSVP to this Event</h2>
<h2 className="text-2xl font-semibold text-gray-800"> </div>
RSVP to this Event
</h2>
<div> <form onSubmit={submitRsvp} className="space-y-4">
<Label htmlFor="status" className="mb-2"> <div>
Your Attendance <Label htmlFor="status" className="mb-2 block">
</Label> Your Attendance
<Select </Label>
defaultValue={status} <Select
onValueChange={(val) => setStatus(val as any)} defaultValue={status}
> onValueChange={(val) => setStatus(val as any)}
<SelectTrigger id="status"> >
<span className="capitalize">{status.replace("_", " ")}</span> <SelectTrigger id="status" className="w-full">
</SelectTrigger> <SelectValue>
<SelectContent> <span className="capitalize">{status.replace("_", " ")}</span>
<SelectItem value="attending">Attending</SelectItem> </SelectValue>
<SelectItem value="not_attending">Not Attending</SelectItem> </SelectTrigger>
<SelectItem value="maybe">Maybe</SelectItem> <SelectContent>
</SelectContent> <SelectItem value="attending">Attending</SelectItem>
</Select> <SelectItem value="not_attending">Not Attending</SelectItem>
<SelectItem value="maybe">Maybe</SelectItem>
</SelectContent>
</Select>
</div>
<div>
<Label htmlFor="number_of_guests" className="mb-2 block">
Number of Guests
</Label>
<Input
id="number_of_guests"
type="number"
min={1}
value={number_of_guests}
onChange={(e) =>
setNumberOfGuests(Math.max(1, Number(e.target.value)))
}
/>
<p className="text-sm text-muted-foreground mt-1">
How many people (including yourself) will be attending?
</p>
</div>
<div>
<Label htmlFor="response_message" className="mb-2 block">
Message to Hosts (optional)
</Label>
<Textarea
id="response_message"
value={response_message}
onChange={(e) => setResponseMessage(e.target.value)}
placeholder="Write a short message to the hosts"
rows={3}
/>
</div>
<div>
<Label htmlFor="dietary_requirements" className="mb-2 block">
Dietary Requirements
</Label>
<Textarea
id="dietary_requirements"
value={dietary_requirements}
onChange={(e) => setDietaryRequirements(e.target.value)}
placeholder="Any dietary restrictions or allergies?"
rows={2}
/>
</div>
<div className="flex justify-end mt-6">
<Button type="submit" className="w-full md:w-auto">
Submit RSVP
</Button>
</div>
</form>
</div> </div>
</div>
<div>
<Label htmlFor="number_of_guests" className="mb-2">
N. guests
</Label>
<Input
id="number_of_guests"
type="number"
min={1}
value={number_of_guests}
onChange={(e) =>
setNumberOfGuests(Math.max(1, Number(e.target.value)))
}
/>
</div>
<div>
<Label htmlFor="response_message" className="mb-2">
Message to Hosts (optional)
</Label>
<Textarea
id="response_message"
value={response_message}
onChange={(e) => setResponseMessage(e.target.value)}
placeholder="Write a short message to the hosts"
/>
</div>
<div>
<Label htmlFor="dietary_requirements" className="mb-2">
Dietary Requirements
</Label>
<Textarea
id="dietary_requirements"
value={dietary_requirements}
onChange={(e) => setDietaryRequirements(e.target.value)}
placeholder="Any dietary restrictions?"
/>
</div>
<Button type="submit" className="w-full">
Submit RSVP
</Button>
</form>
); );
}; };