Skip to content

Commit

Permalink
optimized date format and loading skeleton
Browse files Browse the repository at this point in the history
  • Loading branch information
@bjerrecs
bjerrecs committed Aug 2, 2024
1 parent 2c39610 commit 77b7923
Showing 1 changed file with 47 additions and 24 deletions.
71 changes: 47 additions & 24 deletions src/components/Events.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,61 +21,84 @@ const Events = () => {
fetchData();
}, []);

function dateConverter(date) {
const newDate = new Date(date);
return newDate.toLocaleString('en-uk', { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' });
function dateConverter(start, end) {
const startDate = new Date(start);
const endDate = new Date(end);

if (startDate.getDate() == endDate.getDate()) {
return startDate.toLocaleString('en-uk', { weekday: 'long', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' })+" - "+endDate.toLocaleString('en-uk', { hour: 'numeric', minute: 'numeric' });
} else {
return startDate.toLocaleString('en-uk', { weekday: 'long', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' })+" - "+endDate.toLocaleString('en-uk', { weekday: 'short', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' })
}
}

console.log(dateConverter("2024-08-05 17:00:00"))

return (
<div class="flex flex-col gap-4 md:w-full md:min-w-[900px] h-fit">
<div className="grid grid-cols-5 grid-rows-3 gap-4">
<div className="col-span-5 flex flex-row gap-4">
<img src={events.length != 0 ? events[0].image : ""} className='w-96 h-fit aspect-video'/>
<div className="col-span-5 flex flex-row gap-4">
<a target='_blank' href={events.length != 0 ? events[0].link : ""} className='w-96 h-fit aspect-video'>
{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>}
</a>
<span>
<h2 className='font-bold text-2xl'>{events.length != 0 ? events[0].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[0].start_date) : ""} - {events.length != 0 ? dateConverter(events[0].end_date) : ""}</p>
<p className='line-clamp-5'>{events.length != 0 ? events[0].long_description : ""}</p>
<a target='_blank' href={events.length != 0 ? events[0].link : ""}>
<h2 className='font-bold text-2xl hover:text-secondary hover:underline'>{events.length != 0 ? events[0].title : ""}</h2>
</a>
<p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(events[0].start_date, events[0].end_date) : ""}</p>
<hr className='py-1 mt-2'/>
<p className='line-clamp-6'>{events.length != 0 ? events[0].long_description : ""}</p>
</span>
</div>
<div className="col-span-5 row-start-2 flex flex-row gap-4">
<img src={events.length != 0 ? events[1].image : ""} className='w-96 h-fit aspect-video'/>
<a target='_blank' href={events.length != 0 ? events[1].link : ""} className='w-96 h-fit aspect-video'>
{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>}
</a>
<span>
<h2 className='font-bold text-2xl'>{events.length != 0 ? events[1].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[1].start_date) : ""} - {events.length != 0 ? dateConverter(events[1].end_date) : ""}</p>
<p className='line-clamp-5'>{events.length != 0 ? events[1].long_description : ""}</p>
<a target='_blank' href={events.length != 0 ? events[1].link : ""}>
<h2 className='font-bold text-2xl hover:text-secondary hover:underline'>{events.length != 0 ? events[1].title : ""}</h2>
</a>
<p className='text-gray-800 font-medium'>{events.length != 0 ? dateConverter(events[1].start_date, events[1].end_date) : ""}</p>
<hr className='py-1 mt-2'/>
<p className='line-clamp-6'>{events.length != 0 ? events[1].long_description : ""}</p>
</span>
</div>
<div className='col-span-5 row-start-3 flex flex-row gap-4 w-ful overflow-x-visible md:min-w-[900px] overflow-hidden'>
<div className="flex flex-row gap-4 w-fit">
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[2].link : ""}>
<img src={events.length != 0 ? events[2].image : ""} className='w-48 h-fit aspect-video'/>
<span>
<h2 className='font-bold text-lg'>{events.length != 0 ? events[2].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[2].start_date) : ""} - {events.length != 0 ? dateConverter(events[2].end_date) : ""}</p>
<p>{events.length != 0 ? dateConverter(events[2].start_date, events[2].end_date) : ""}</p>
</span>
</div>
<div className="flex flex-row gap-4">
</a>
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[3].link : ""}>
<img src={events.length != 0 ? events[3].image : ""} className='w-48 h-fit aspect-video'/>
<span>
<h2 className='font-bold text-lg'>{events.length != 0 ? events[3].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[3].start_date) : ""} - {events.length != 0 ? dateConverter(events[3].end_date) : ""}</p>
<p>{events.length != 0 ? dateConverter(events[3].start_date, events[3].end_date) : ""}</p>
</span>
</div>
<div className="flex flex-row gap-4">
</a>
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[4].link : ""}>
<img src={events.length != 0 ? events[4].image : ""} className='w-48 h-fit aspect-video'/>
<span>
<h2 className='font-bold text-lg'>{events.length != 0 ? events[4].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[4].start_date) : ""} - {events.length != 0 ? dateConverter(events[4].end_date) : ""}</p>
<p>{events.length != 0 ? dateConverter(events[4].start_date, events[4].end_date) : ""}</p>
</span>
</a>
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[5].link : ""}>
<img src={events.length != 0 ? events[5].image : ""} className='w-48 h-fit aspect-video'/>
<span>
<h2 className='font-bold text-lg'>{events.length != 0 ? events[5].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
</span>
</div>
<div className="flex flex-row gap-4">
</a>
<a className="flex flex-col gap-4" target='_blank' href={events.length != 0 ? events[6].link : ""}>
<img src={events.length != 0 ? events[5].image : ""} className='w-48 h-fit aspect-video'/>
<span>
<h2 className='font-bold text-lg'>{events.length != 0 ? events[5].title : ""}</h2>
<p>{events.length != 0 ? dateConverter(events[5].start_date) : ""} - {events.length != 0 ? dateConverter(events[5].end_date) : ""}</p>
<p>{events.length != 0 ? dateConverter(events[5].start_date, events[5].end_date) : ""}</p>
</span>
</div>
</a>
</div>
</div>
</div>
Expand Down

0 comments on commit 77b7923

Please sign in to comment.