reduce opacity of events in the past

src/components/Program.astro

@@ -5,6 +5,9 @@ import ProgramCard from './ProgramCard.astro';
 const { lang = 'no', data } = Astro.props as { lang?: Lang, data: any };
 const t = translations[lang].program;
 
+const today = new Date();
+today.setHours(0, 0, 0, 0);
+
 const convertDate = (date: string | Date) => {
   let d = date;
   if (!(d instanceof Date)) {
@@ -25,7 +28,13 @@ const convertDate = (date: string | Date) => {
   </div>
   <div class="flex gap-12 flex-wrap justify-center items-stretch">
     {Object.entries(data).map(([date, items], idx) => (
-      <ProgramCard date={date} items={items} lang={lang} even={idx % 2 === 1} />
+      <ProgramCard
+        date={date}
+        items={items}
+        lang={lang}
+        even={idx % 2 === 1}
+        isPast={new Date(date) < today}
+      />
     ))}
   </div>
   <div class="flex justify-center">

src/components/ProgramCard.astro

@@ -1,6 +1,6 @@
 ---
 import { translations, type Lang } from '@data/i18n';
-const { date, items, lang = 'no', even = false } = Astro.props as { date: string | Date, items: ProgramItem[], lang?: Lang, even?: boolean };
+const { date, items, lang = 'no', even = false, isPast = false } = Astro.props as { date: string | Date, items: ProgramItem[], lang?: Lang, even?: boolean, isPast?: boolean };
 const t = translations[lang].program;
 
 type ProgramItem = {
@@ -24,7 +24,7 @@ const convertDate = (date: string | Date) => {
 };
 ---
 
-<div id="program-list" class:list={["w-125 p-6 rounded-2xl flex flex-col gap-2", even ? "bg-slottsblaa text-white" : "bg-gyllen-beige"]}>
+<div id="program-list" class:list={["w-125 p-6 rounded-2xl flex flex-col gap-2", even ? "bg-slottsblaa text-white" : "bg-gyllen-beige", isPast ? "opacity-50" : ""]}>
   <h3 class="font-bold text-xl">{convertDate(date)}</h3>
   <ul>
     {items.map((item) => {