Refactor container layout and remove redundant wrappers
Reorganized container layouts across dashboard and event pages to remove redundant `div` wrappers and ensure consistent structure. This improves maintainability and simplifies the codebase while retaining visual behavior.
This commit is contained in:
@@ -81,140 +81,138 @@ export default function CreateEventPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto px-4 py-12 max-w-4xl">
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Create New Event</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit} className="grid grid-cols-1 gap-6">
|
||||
<Card className="shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">Create New Event</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={onSubmit} className="grid grid-cols-1 gap-6">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Event Title *</Label>
|
||||
<Input
|
||||
required
|
||||
name="title"
|
||||
placeholder="My Awesome Event"
|
||||
value={formData.title}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className={"mb-2"}>Description</Label>
|
||||
<Textarea
|
||||
name="description"
|
||||
placeholder="Quick description of your event"
|
||||
value={formData.description || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Event Title *</Label>
|
||||
<Label className={"mb-2"}>Event Date *</Label>
|
||||
<Input
|
||||
type="date"
|
||||
required
|
||||
name="event_date"
|
||||
value={formData.event_date}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={"mb-2"}>Slug *</Label>
|
||||
<Input
|
||||
required
|
||||
name="title"
|
||||
placeholder="My Awesome Event"
|
||||
value={formData.title}
|
||||
name="slug"
|
||||
pattern="^[a-z0-9-]+$"
|
||||
placeholder="my-awesome-event"
|
||||
value={formData.slug}
|
||||
onChange={onChange}
|
||||
className={slugError ? "border-red-500" : ""}
|
||||
/>
|
||||
{slugError && (
|
||||
<p className="text-sm text-red-500 mt-1">{slugError}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Description</Label>
|
||||
<Textarea
|
||||
name="description"
|
||||
placeholder="Quick description of your event"
|
||||
value={formData.description || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Event Date *</Label>
|
||||
<Input
|
||||
type="date"
|
||||
required
|
||||
name="event_date"
|
||||
value={formData.event_date}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={"mb-2"}>Slug *</Label>
|
||||
<Input
|
||||
required
|
||||
name="slug"
|
||||
pattern="^[a-z0-9-]+$"
|
||||
placeholder="my-awesome-event"
|
||||
value={formData.slug}
|
||||
onChange={onChange}
|
||||
className={slugError ? "border-red-500" : ""}
|
||||
/>
|
||||
{slugError && (
|
||||
<p className="text-sm text-red-500 mt-1">{slugError}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Start Time</Label>
|
||||
<Input
|
||||
type="time"
|
||||
name="event_start_time"
|
||||
value={formData.event_start_time || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={"mb-2"}>End Time</Label>
|
||||
<Input
|
||||
type="time"
|
||||
name="event_end_time"
|
||||
value={formData.event_end_time || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location Name</Label>
|
||||
<Input
|
||||
name="location_name"
|
||||
placeholder="Venue name"
|
||||
value={formData.location_name || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location Address</Label>
|
||||
<Input
|
||||
name="location_address"
|
||||
placeholder="123 Main Street"
|
||||
value={formData.location_address || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location URL</Label>
|
||||
<Label className={"mb-2"}>Start Time</Label>
|
||||
<Input
|
||||
type="url"
|
||||
name="location_url"
|
||||
placeholder="https://maps.app/location"
|
||||
value={formData.location_url || ""}
|
||||
type="time"
|
||||
name="event_start_time"
|
||||
value={formData.event_start_time || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="is_public"
|
||||
checked={formData.is_public}
|
||||
onCheckedChange={onTogglePublic}
|
||||
<div>
|
||||
<Label className={"mb-2"}>End Time</Label>
|
||||
<Input
|
||||
type="time"
|
||||
name="event_end_time"
|
||||
value={formData.event_end_time || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
<Label htmlFor="is_public">Public Event</Label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button disabled={isCreating} type="submit">
|
||||
{isCreating ? "Creating..." : "Create Event"}
|
||||
</Button>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location Name</Label>
|
||||
<Input
|
||||
name="location_name"
|
||||
placeholder="Venue name"
|
||||
value={formData.location_name || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location Address</Label>
|
||||
<Input
|
||||
name="location_address"
|
||||
placeholder="123 Main Street"
|
||||
value={formData.location_address || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className={"mb-2"}>Location URL</Label>
|
||||
<Input
|
||||
type="url"
|
||||
name="location_url"
|
||||
placeholder="https://maps.app/location"
|
||||
value={formData.location_url || ""}
|
||||
onChange={onChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="is_public"
|
||||
checked={formData.is_public}
|
||||
onCheckedChange={onTogglePublic}
|
||||
/>
|
||||
<Label htmlFor="is_public">Public Event</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button disabled={isCreating} type="submit">
|
||||
{isCreating ? "Creating..." : "Create Event"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user