Update Responsive and Contact Us page and function

This commit is contained in:
Koncept Kit
2025-12-13 00:58:39 +07:00
parent 44f2be5d84
commit 12a32b7f3f
22 changed files with 936 additions and 151 deletions

View File

@@ -131,7 +131,7 @@ const AdminEvents = () => {
return (
<>
{/* Header */}
<div className="mb-8 flex justify-between items-center">
<div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
Event Management
@@ -156,7 +156,7 @@ const AdminEvents = () => {
</Button>
</DialogTrigger>
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
<DialogHeader>
<DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
{editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -188,7 +188,7 @@ const AdminEvents = () => {
/>
</div>
<div className="grid md:grid-cols-2 gap-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
Start Date & Time *
@@ -254,13 +254,7 @@ const AdminEvents = () => {
</label>
</div>
<div className="flex gap-3 pt-4">
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
<div className="flex flex-col-reverse sm:flex-row gap-3 pt-4">
<Button
type="button"
variant="outline"
@@ -269,6 +263,12 @@ const AdminEvents = () => {
>
Cancel
</Button>
<Button
type="submit"
className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
>
{editingEvent ? 'Update Event' : 'Create Event'}
</Button>
</div>
</form>
</DialogContent>
@@ -281,7 +281,7 @@ const AdminEvents = () => {
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
</div>
) : events.length > 0 ? (
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{events.map((event) => (
<Card
key={event.id}