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

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

@@ -50,24 +50,25 @@ 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"
>
<h2 className="text-2xl font-semibold text-gray-800">
RSVP to this Event
</h2>
<div> <div>
<Label htmlFor="status" className="mb-2"> <h2 className="text-lg font-medium">RSVP to this Event</h2>
</div>
<form onSubmit={submitRsvp} className="space-y-4">
<div>
<Label htmlFor="status" className="mb-2 block">
Your Attendance Your Attendance
</Label> </Label>
<Select <Select
defaultValue={status} defaultValue={status}
onValueChange={(val) => setStatus(val as any)} onValueChange={(val) => setStatus(val as any)}
> >
<SelectTrigger id="status"> <SelectTrigger id="status" className="w-full">
<SelectValue>
<span className="capitalize">{status.replace("_", " ")}</span> <span className="capitalize">{status.replace("_", " ")}</span>
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="attending">Attending</SelectItem> <SelectItem value="attending">Attending</SelectItem>
@@ -78,8 +79,8 @@ export const RSVP: React.FC<RSVPProps> = ({
</div> </div>
<div> <div>
<Label htmlFor="number_of_guests" className="mb-2"> <Label htmlFor="number_of_guests" className="mb-2 block">
N. guests Number of Guests
</Label> </Label>
<Input <Input
id="number_of_guests" id="number_of_guests"
@@ -90,10 +91,13 @@ export const RSVP: React.FC<RSVPProps> = ({
setNumberOfGuests(Math.max(1, Number(e.target.value))) 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>
<div> <div>
<Label htmlFor="response_message" className="mb-2"> <Label htmlFor="response_message" className="mb-2 block">
Message to Hosts (optional) Message to Hosts (optional)
</Label> </Label>
<Textarea <Textarea
@@ -101,25 +105,31 @@ export const RSVP: React.FC<RSVPProps> = ({
value={response_message} value={response_message}
onChange={(e) => setResponseMessage(e.target.value)} onChange={(e) => setResponseMessage(e.target.value)}
placeholder="Write a short message to the hosts" placeholder="Write a short message to the hosts"
rows={3}
/> />
</div> </div>
<div> <div>
<Label htmlFor="dietary_requirements" className="mb-2"> <Label htmlFor="dietary_requirements" className="mb-2 block">
Dietary Requirements Dietary Requirements
</Label> </Label>
<Textarea <Textarea
id="dietary_requirements" id="dietary_requirements"
value={dietary_requirements} value={dietary_requirements}
onChange={(e) => setDietaryRequirements(e.target.value)} onChange={(e) => setDietaryRequirements(e.target.value)}
placeholder="Any dietary restrictions?" placeholder="Any dietary restrictions or allergies?"
rows={2}
/> />
</div> </div>
<Button type="submit" className="w-full"> <div className="flex justify-end mt-6">
<Button type="submit" className="w-full md:w-auto">
Submit RSVP Submit RSVP
</Button> </Button>
</div>
</form> </form>
</div>
</div>
); );
}; };