feat: reuse creative prize table on esport

gathering · Oct 21, 2024 · b587d66 · b587d66
1 parent fb76b6f
commit b587d66
Showing 1 changed file with 32 additions and 19 deletions.
diff --git a/src/components/competitions/SportsBox.astro b/src/components/competitions/SportsBox.astro
@@ -34,30 +34,43 @@ const formattedPrizes = prizes.map((prize) =>
 );
 ---
 
-<section class={classNames}>
-  {
-    hasPills && (
-      <div class="flex flex-row justify-end gap-2 mb-4">
-        {byoc && <Pill text="Egen maskin" color="orange" />}
-        {requiresTicket && <Pill text="I skipet" color="blue" />}
-      </div>
-    )
-  }
-  <H2 text={title} color="" class="mt-4" />
-  <slot />
+<section class={`flex flex-col ${classNames}`}>
+  <div>
+    {
+      hasPills && (
+        <div class="flex flex-row justify-end gap-2 mb-4">
+          {byoc && <Pill text="Egen maskin" color="orange" />}
+          {requiresTicket && <Pill text="I skipet" color="blue" />}
+        </div>
+      )
+    }
+    <H2 text={title} color="" class="mt-4" />
+    <slot />
+  </div>
   {
     formattedPrizes.length ? (
-      <>
-        <H3 class="mt-4" color="">
+      <div class="mt-4 last:mt-auto">
+        <H3 class="mt-0 text-lg" color="">
           Premipotten
         </H3>
-        <ol>
-          {formattedPrizes.map((p) => (
-            <li>{p}</li>
+        <dl class="divide-y divide-black/50 not-prose">
+          {formattedPrizes.map((prize, index) => (
+            <div class="px-2 py-1 grid grid-cols-3 sm:gap-2 sm:px-0">
+              <dt class="text-sm font-bold leading-4">
+                {`${index + 1}. plass`}
+              </dt>
+              <dd class="mt-1 text-sm leading-4 col-span-2 sm:mt-0">{prize}</dd>
+            </div>
           ))}
-        </ol>
-      </>
+        </dl>
+      </div>
     ) : null
   }
-  {url && <button class={buttonClassNames}>Les mer</button>}
+  {
+    url && (
+      <div class="last:pt-4 last:mt-auto w-full">
+        <button class={buttonClassNames}>Les mer</button>
+      </div>
+    )
+  }
 </section>