andika/membership-fe
2
1
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Update FE

Browse Source
This commit is contained in:
Koncept Kit
2025-12-08 20:45:40 +07:00
parent d8c1e133ac
commit 1f27c3224b
23 changed files with 438 additions and 438 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/EventDetails.js
View File

@@ -46,10 +46,10 @@ const EventDetails = () => {
if (loading) {
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="flex items-center justify-center min-h-[60vh]">
<p className="text-[#6B708D]">Loading event...</p>
<p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
</div>
</div>
);
@@ -60,24 +60,24 @@ const EventDetails = () => {
}
return (
<div className="min-h-screen bg-[#FDFCF8]">
<div className="min-h-screen bg-white">
<Navbar />
<div className="max-w-4xl mx-auto px-6 py-12">
<button
onClick={() => navigate('/events')}
className="inline-flex items-center text-[#6B708D] hover:text-[#E07A5F] transition-colors mb-8"
className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors mb-8"
data-testid="back-to-events-button"
>
<ArrowLeft className="h-4 w-4 mr-2" />
Back to Events
</button>
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#EAE0D5] shadow-lg">
<Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
<div className="mb-8">
<div className="flex items-center gap-4 mb-6">
<div className="bg-[#F2CC8F]/20 p-4 rounded-xl">
<Calendar className="h-10 w-10 text-[#E07A5F]" />
<div className="bg-[#DDD8EB]/20 p-4 rounded-xl">
<Calendar className="h-10 w-10 text-[#664fa3]" />
</div>
{event.user_rsvp_status && (
<Badge
@@ -85,8 +85,8 @@ const EventDetails = () => {
event.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white'
: event.user_rsvp_status === 'no'
? 'bg-[#6B708D] text-white'
: 'bg-[#F2CC8F] text-[#3D405B]'
? 'bg-gray-400 text-white'
: 'bg-orange-100 text-orange-700'
}`}
>
{event.user_rsvp_status === 'yes' && 'Going'}
@@ -96,14 +96,14 @@ const EventDetails = () => {
)}
</div>
<h1 className="text-4xl md:text-5xl font-semibold fraunces text-[#3D405B] mb-6">
<h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
{event.title}
</h1>
<div className="space-y-4 text-lg">
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Calendar className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleDateString('en-US', {
weekday: 'long',
year: 'numeric',
@@ -112,20 +112,20 @@ const EventDetails = () => {
})}
</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Calendar className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
{new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<MapPin className="h-5 w-5" />
<span>{event.location}</span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
</div>
<div className="flex items-center gap-3 text-[#6B708D]">
<div className="flex items-center gap-3 text-[#664fa3]">
<Users className="h-5 w-5" />
<span>
<span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
{event.capacity && ` (Capacity: ${event.capacity})`}
</span>
@@ -134,18 +134,18 @@ const EventDetails = () => {
</div>
{event.description && (
<div className="mb-8 pb-8 border-b border-[#EAE0D5]">
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-4">
<div className="mb-8 pb-8 border-b border-[#ddd8eb]">
<h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
About This Event
</h2>
<p className="text-[#6B708D] leading-relaxed whitespace-pre-line">
<p className="text-[#664fa3] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
{event.description}
</p>
</div>
)}
<div>
<h2 className="text-2xl font-semibold fraunces text-[#3D405B] mb-6">
<h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
RSVP to This Event
</h2>
<div className="flex gap-4 flex-wrap">
@@ -155,7 +155,7 @@ const EventDetails = () => {
className={`rounded-full px-8 py-6 flex items-center gap-2 ${
event.user_rsvp_status === 'yes'
? 'bg-[#81B29A] text-white'
: 'bg-[#E07A5F] text-white hover:bg-[#D0694E]'
: 'bg-[#DDD8EB] text-[#422268] hover:bg-white'
}`}
data-testid="rsvp-yes-button"
>
@@ -168,8 +168,8 @@ const EventDetails = () => {
variant="outline"
className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
event.user_rsvp_status === 'maybe'
? 'border-[#F2CC8F] bg-[#F2CC8F]/20 text-[#3D405B]'
: 'border-[#3D405B] text-[#3D405B] hover:bg-[#F2CC8F]/10'
? 'border-orange-400 bg-orange-100 text-orange-700'
: 'border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9]'
}`}
data-testid="rsvp-maybe-button"
>
@@ -182,8 +182,8 @@ const EventDetails = () => {
variant="outline"
className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
event.user_rsvp_status === 'no'
? 'border-[#6B708D] bg-[#6B708D]/20 text-[#3D405B]'
: 'border-[#6B708D] text-[#6B708D] hover:bg-[#6B708D]/10'
? 'border-gray-400 bg-gray-100 text-gray-700'
: 'border-gray-400 text-gray-600 hover:bg-gray-50'
}`}
data-testid="rsvp-no-button"
>