From 77b7923044c0023200522fd21a549e7a88900e3d Mon Sep 17 00:00:00 2001
From: Simon Bjerre <bjerrecs@protonmail.com>
Date: Sat, 3 Aug 2024 00:34:12 +0200
Subject: [PATCH] optimized date format and loading skeleton

---
 src/components/Events.jsx | 71 ++++++++++++++++++++++++++-------------
 1 file changed, 47 insertions(+), 24 deletions(-)

diff --git a/src/components/Events.jsx b/src/components/Events.jsx
index 1b052e7..72f6a77 100644
--- a/src/components/Events.jsx
+++ b/src/components/Events.jsx
@@ -21,9 +21,15 @@ 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"))
@@ -31,51 +37,68 @@ const Events = () => {
     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>