Skip to content

Commit c3e19d3

Browse files
blt950blt950
committed
fix: event tweaks (partially done)
1 parent 77b7923 commit c3e19d3

File tree

1 file changed

+24
-30
lines changed

1 file changed

+24
-30
lines changed

‎src/components/Events.jsx

+24-30
Original file line numberDiff line numberDiff line change
@@ -36,68 +36,62 @@ const Events = () => {
3636

3737
return (
3838
<div class="flex flex-col gap-4 md:w-full md:min-w-[900px] h-fit">
39-
<div className="grid grid-cols-5 grid-rows-3 gap-4">
39+
<h3 className="font-semibold text-lg text-secondary mb-2 dark:text-white">Today</h3>
40+
<div className="grid grid-cols-5 grid-rows-4 gap-4">
4041
<div className="col-span-5 flex flex-row gap-4">
4142
<a target='_blank' href={events.length != 0 ? events[0].link : ""} className='w-96 h-fit aspect-video'>
42-
{events.length != 0 ? <img src={events[0].image} className='w-96 h-fit aspect-video rounded' /> : <div className='w-96 h-fit aspect-video bg-gray-200 rounded'></div>}
43+
{events.length != 0 ? <img src={events[0].image} className='w-96 h-fit aspect-video rounded-sm' /> : <div className='w-96 h-fit aspect-video bg-gray-200 rounded'></div>}
4344
</a>
44-
<span>
45+
<div>
4546
<a target='_blank' href={events.length != 0 ? events[0].link : ""}>
4647
<h2 className='font-bold text-2xl hover:text-secondary hover:underline'>{events.length != 0 ? events[0].title : ""}</h2>
4748
</a>
4849
<p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(events[0].start_date, events[0].end_date) : ""}</p>
4950
<hr className='py-1 mt-2'/>
50-
<p className='line-clamp-6'>{events.length != 0 ? events[0].long_description : ""}</p>
51-
</span>
51+
<p className='line-clamp-6 mb-1'>{events.length != 0 ? events[0].short_description : ""}</p>
52+
<a href="#" class='bg-snow p-3 text-center text-black dark:text-white hover:brightness-[95%] d-block inline-block mt-2 text-sm rounded-sm' target='_blank'>
53+
Read more
54+
</a>
55+
</div>
5256
</div>
5357
<div className="col-span-5 row-start-2 flex flex-row gap-4">
5458
<a target='_blank' href={events.length != 0 ? events[1].link : ""} className='w-96 h-fit aspect-video'>
55-
{events.length != 0 ? <img src={events[1].image} className='w-96 h-fit aspect-video rounded' /> : <div className='w-96 h-fit aspect-video bg-gray-200 rounded'></div>}
59+
{events.length != 0 ? <img src={events[1].image} className='w-96 h-fit aspect-video rounded-sm' /> : <div className='w-96 h-fit aspect-video bg-gray-200 rounded'></div>}
5660
</a>
57-
<span>
58-
<a target='_blank' href={events.length != 0 ? events[1].link : ""}>
61+
<div>
62+
<a target='_blank' href={events.length != 0 ? events[1].link : ""}>
5963
<h2 className='font-bold text-2xl hover:text-secondary hover:underline'>{events.length != 0 ? events[1].title : ""}</h2>
6064
</a>
6165
<p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(events[1].start_date, events[1].end_date) : ""}</p>
6266
<hr className='py-1 mt-2'/>
63-
<p className='line-clamp-6'>{events.length != 0 ? events[1].long_description : ""}</p>
64-
</span>
67+
<p className='line-clamp-6 mb-1'>{events.length != 0 ? events[1].short_description : ""}</p>
68+
<a href="#" class='bg-snow p-3 text-center text-black dark:text-white hover:brightness-[95%] d-block inline-block mt-2 text-sm rounded-sm' target='_blank'>
69+
Read more
70+
</a>
71+
</div>
6572
</div>
73+
74+
<h3 className="font-semibold text-lg text-secondary mb-2 dark:text-white">Upcoming</h3>
6675
<div className='col-span-5 row-start-3 flex flex-row gap-4 w-ful overflow-x-visible md:min-w-[900px] overflow-hidden'>
6776
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[2].link : ""}>
6877
<img src={events.length != 0 ? events[2].image : ""} className='w-48 h-fit aspect-video'/>
69-
<span>
70-
<h2 className='font-bold text-lg'>{events.length != 0 ? events[2].title : ""}</h2>
71-
<p>{events.length != 0 ? dateConverter(events[2].start_date, events[2].end_date) : ""}</p>
72-
</span>
78+
<p>{events.length != 0 ? dateConverter(events[2].start_date, events[2].end_date) : ""}</p>
7379
</a>
7480
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[3].link : ""}>
7581
<img src={events.length != 0 ? events[3].image : ""} className='w-48 h-fit aspect-video'/>
76-
<span>
77-
<h2 className='font-bold text-lg'>{events.length != 0 ? events[3].title : ""}</h2>
78-
<p>{events.length != 0 ? dateConverter(events[3].start_date, events[3].end_date) : ""}</p>
79-
</span>
82+
<p>{events.length != 0 ? dateConverter(events[3].start_date, events[3].end_date) : ""}</p>
8083
</a>
8184
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[4].link : ""}>
8285
<img src={events.length != 0 ? events[4].image : ""} className='w-48 h-fit aspect-video'/>
83-
<span>
84-
<h2 className='font-bold text-lg'>{events.length != 0 ? events[4].title : ""}</h2>
85-
<p>{events.length != 0 ? dateConverter(events[4].start_date, events[4].end_date) : ""}</p>
86-
</span>
86+
<p>{events.length != 0 ? dateConverter(events[4].start_date, events[4].end_date) : ""}</p>
8787
</a>
8888
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[5].link : ""}>
8989
<img src={events.length != 0 ? events[5].image : ""} className='w-48 h-fit aspect-video'/>
90-
<span>
91-
<h2 className='font-bold text-lg'>{events.length != 0 ? events[5].title : ""}</h2>
92-
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
93-
</span>
90+
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
9491
</a>
9592
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[6].link : ""}>
9693
<img src={events.length != 0 ? events[5].image : ""} className='w-48 h-fit aspect-video'/>
97-
<span>
98-
<h2 className='font-bold text-lg'>{events.length != 0 ? events[5].title : ""}</h2>
99-
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
100-
</span>
94+
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
10195
</a>
10296
</div>
10397
</div>

0 commit comments

Comments
 (0)