restyling

Co-authored-by: Petter Sæterøy <potetmos1@users.noreply.github.com>

src/components/Program.astro

@@ -1,30 +1,40 @@
 ---
-import { translations } from '../data/i18n.js';
+import { translations } from '@data/i18n.js';
 const { lang = 'no', data } = Astro.props;
 const t = translations[lang].program;
-const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
-  weekday: 'long',
-  year: 'numeric',
-  month: 'long',
-  day: 'numeric'
-});
+
+const convertDate = (date) => {
+  let d = date;
+  if (!(d instanceof Date)) {
+    d = new Date(d);
+  }
+  return d.toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-NO', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric'
+  });
+};
 ---
+
 {data ? (
-  <div class="flex gap-4 flex-col">
-    <div class="flex items-center justify-between">
-      <h2 class="font-bold text-xl">{t.today}</h2>
-      <p>{currentDate}</p>
-    </div>
-    {Object.entries(data).map(([dayName, items]) => (
-      <div class="day">
-        <h2>{dayName}</h2>
+  <div class="flex items-center justify-between flex-col gap-8">
+    <h1 class="font-bold text-3xl text-center w-full">{t.today}</h1>
+    <p class="font-bold text-2xl text-center w-full">{convertDate(new Date())}</p>
+  </div>
+  <div class="flex gap-12 flex-wrap justify-center items-stretch">
+    {Object.entries(data).map(([date, items]) => (
+      <div id="program-list" class="w-125 p-6 border-1 border-white rounded-2xl even:bg-slottsblaa even:text-white bg-gyllen-beige flex flex-col gap-2">
+        <h2 class="font-bold text-xl">{convertDate(date)}</h2>
         <ul>
           {items.map((item) => {
             const price = item.price || item.cost;
             return (
-              <li class="item">
-                {item.time} - {item.event} - {item.url ? (
-                  <a href={item.url} target="_blank" rel="noopener noreferrer">{price}</a>
+              <li class="flex justify-between">
+                <p>
+                {item.time} - {item.event}
+                </p>
+                {item.url ? (
+                  <a href={item.url} target="_blank" rel="noopener noreferrer" class="text-right">{price}</a>
                 ) : (
                   price
                 )}
@@ -35,25 +45,15 @@ const currentDate = new Date().toLocaleDateString(lang === 'en' ? 'en-GB' : 'nb-
       </div>
     ))}
   </div>
+  <div class="flex justify-center">
+    <p class="font-bold text-xl text-center w-full">
+      <a href="https://neuf.no/arrangementer" class="text-gyllen-oransje hover:text-slottsblaa hover:underline" target="_blank" rel="noopener noreferrer">{t.program_more}</a>
+    </p>
+  </div>
 ) : (
   <div>No program data available.</div>
 )}
 
 <style>
-.day {
-  margin-bottom: 20px;
-  padding: 10px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
-}
-.day:nth-child(odd) {
-  background-color: #F8BC90;
-}
-.day:nth-child(even) {
-  background-color: #0A0F6D;
-  color: #fff;
-}
-.item {
-  margin: 5px 0;
-}
+
 </style>