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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="container mx-auto px-4 py-12 max-w-4xl">
|
<Card className="shadow-lg">
|
||||||
<Card className="shadow-lg">
|
<CardHeader>
|
||||||
<CardHeader>
|
<CardTitle className="text-2xl">Create New Event</CardTitle>
|
||||||
<CardTitle className="text-2xl">Create New Event</CardTitle>
|
</CardHeader>
|
||||||
</CardHeader>
|
<CardContent>
|
||||||
<CardContent>
|
<form onSubmit={onSubmit} className="grid grid-cols-1 gap-6">
|
||||||
<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>
|
<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
|
<Input
|
||||||
required
|
required
|
||||||
name="title"
|
name="slug"
|
||||||
placeholder="My Awesome Event"
|
pattern="^[a-z0-9-]+$"
|
||||||
value={formData.title}
|
placeholder="my-awesome-event"
|
||||||
|
value={formData.slug}
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
|
className={slugError ? "border-red-500" : ""}
|
||||||
/>
|
/>
|
||||||
|
{slugError && (
|
||||||
|
<p className="text-sm text-red-500 mt-1">{slugError}</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div>
|
<div>
|
||||||
<Label className={"mb-2"}>Description</Label>
|
<Label className={"mb-2"}>Start Time</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>
|
|
||||||
<Input
|
<Input
|
||||||
type="url"
|
type="time"
|
||||||
name="location_url"
|
name="event_start_time"
|
||||||
placeholder="https://maps.app/location"
|
value={formData.event_start_time || ""}
|
||||||
value={formData.location_url || ""}
|
|
||||||
onChange={onChange}
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
<div className="flex items-center space-x-2">
|
<Label className={"mb-2"}>End Time</Label>
|
||||||
<Switch
|
<Input
|
||||||
id="is_public"
|
type="time"
|
||||||
checked={formData.is_public}
|
name="event_end_time"
|
||||||
onCheckedChange={onTogglePublic}
|
value={formData.event_end_time || ""}
|
||||||
|
onChange={onChange}
|
||||||
/>
|
/>
|
||||||
<Label htmlFor="is_public">Public Event</Label>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex justify-end gap-2 mt-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<Button
|
<div>
|
||||||
variant="outline"
|
<Label className={"mb-2"}>Location Name</Label>
|
||||||
type="button"
|
<Input
|
||||||
onClick={() => router.back()}
|
name="location_name"
|
||||||
>
|
placeholder="Venue name"
|
||||||
Cancel
|
value={formData.location_name || ""}
|
||||||
</Button>
|
onChange={onChange}
|
||||||
<Button disabled={isCreating} type="submit">
|
/>
|
||||||
{isCreating ? "Creating..." : "Create Event"}
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
<div>
|
||||||
</CardContent>
|
<Label className={"mb-2"}>Location Address</Label>
|
||||||
</Card>
|
<Input
|
||||||
</div>
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
<div className="container mx-auto px-4 py-12">{children}</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -25,89 +25,87 @@ export default function DashboardPage() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="container mx-auto px-4 py-12">
|
<div className="max-w-7xl mx-auto">
|
||||||
<div className="max-w-7xl mx-auto">
|
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
|
||||||
<h1 className="text-3xl font-bold mb-8">Dashboard</h1>
|
|
||||||
|
|
||||||
<div className="flex items-center justify-between mb-8">
|
<div className="flex items-center justify-between mb-8">
|
||||||
<div>
|
<div>
|
||||||
<h2 className="text-xl font-semibold">Your Events</h2>
|
<h2 className="text-xl font-semibold">Your Events</h2>
|
||||||
<p className="text-gray-500 dark:text-gray-400">
|
<p className="text-gray-500 dark:text-gray-400">
|
||||||
Manage your scheduled events.
|
Manage your scheduled events.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
<Button asChild>
|
|
||||||
<Link href="/dashboard/events/new">+ Add New Event</Link>
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<Button asChild>
|
||||||
|
<Link href="/dashboard/events/new">+ Add New Event</Link>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
{isLoadingUserEvents && (
|
{isLoadingUserEvents && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
|
<Loader2Icon className="h-6 w-6 animate-spin text-blue-500" />
|
||||||
<span>Loading your events...</span>
|
<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>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{!isLoadingUserEvents &&
|
{!isLoadingUserEvents &&
|
||||||
userEvents?.items &&
|
(!userEvents?.items || userEvents.items.length === 0) && (
|
||||||
userEvents.items.length > 0 && (
|
<div className="bg-gray-100 dark:bg-slate-700 rounded p-8 text-center">
|
||||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
<p className="text-gray-500 dark:text-gray-400">
|
||||||
{userEvents.items.map((event: EventResponse) => (
|
You haven't created any events yet.
|
||||||
<Card
|
</p>
|
||||||
key={event.id}
|
<Button asChild className="mt-4">
|
||||||
className="hover:shadow-lg transition-shadow"
|
<Link href="/dashboard/events/new">
|
||||||
>
|
Create Your First Event
|
||||||
<CardHeader>
|
</Link>
|
||||||
<CardTitle>{event.title}</CardTitle>
|
</Button>
|
||||||
{event.is_public ? (
|
</div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user