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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function MainLayout({
|
||||
return (
|
||||
<>
|
||||
<Navbar />
|
||||
{children}
|
||||
<div className="container mx-auto px-4 py-12">{children}</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -25,89 +25,87 @@ export default function DashboardPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
|
||||
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">Your Events</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Manage your scheduled events.
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link href="/dashboard/events/new">+ Add New Event</Link>
|
||||
</Button>
|
||||
<div className="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">Your Events</h2>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Manage your scheduled events.
|
||||
</p>
|
||||
</div>
|
||||
<Button asChild>
|
||||
<Link href="/dashboard/events/new">+ Add New Event</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isLoadingUserEvents && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
|
||||
<span>Loading your events...</span>
|
||||
{isLoadingUserEvents && (
|
||||
<div className="flex items-center gap-2">
|
||||
<Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
|
||||
<span>Loading your events...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoadingUserEvents &&
|
||||
userEvents?.items &&
|
||||
userEvents.items.length > 0 && (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{userEvents.items.map((event: EventResponse) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
className="hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>{event.title}</CardTitle>
|
||||
{event.is_public ? (
|
||||
<Badge variant="default">Public</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">Private</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="line-clamp-2">
|
||||
{event.description || "No description provided."}
|
||||
</CardDescription>
|
||||
{event.location_address && (
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<MapPinIcon className="h-4 w-4" />
|
||||
{event.location_address}
|
||||
</div>
|
||||
)}
|
||||
{event.event_start_time && (
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<CalendarIcon className="h-4 w-4" />
|
||||
{new Date(event.event_start_time).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button size="sm" asChild>
|
||||
<Link href={`/dashboard/events/${event.slug}`}>
|
||||
View Event
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoadingUserEvents &&
|
||||
userEvents?.items &&
|
||||
userEvents.items.length > 0 && (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{userEvents.items.map((event: EventResponse) => (
|
||||
<Card
|
||||
key={event.id}
|
||||
className="hover:shadow-lg transition-shadow"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle>{event.title}</CardTitle>
|
||||
{event.is_public ? (
|
||||
<Badge variant="default">Public</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">Private</Badge>
|
||||
)}
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="line-clamp-2">
|
||||
{event.description || "No description provided."}
|
||||
</CardDescription>
|
||||
{event.location_address && (
|
||||
<div className="flex items-center gap-2 mt-2 text-sm text-gray-500 dark:text-gray-400">
|
||||
<MapPinIcon className="h-4 w-4" />
|
||||
{event.location_address}
|
||||
</div>
|
||||
)}
|
||||
{event.event_start_time && (
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-gray-500 dark:text-gray-400">
|
||||
<CalendarIcon className="h-4 w-4" />
|
||||
{new Date(event.event_start_time).toLocaleString()}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<Button size="sm" asChild>
|
||||
<Link href={`/dashboard/events/${event.slug}`}>
|
||||
View Event
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoadingUserEvents &&
|
||||
(!userEvents?.items || userEvents.items.length === 0) && (
|
||||
<div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
You haven't created any events yet.
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/dashboard/events/new">
|
||||
Create Your First Event
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{!isLoadingUserEvents &&
|
||||
(!userEvents?.items || userEvents.items.length === 0) && (
|
||||
<div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
You haven't created any events yet.
|
||||
</p>
|
||||
<Button asChild className="mt-4">
|
||||
<Link href="/dashboard/events/new">
|
||||
Create Your First Event
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user