⬆️ upgrade: upgrade dependencies

assets/css/main.css

@@ -9,7 +9,7 @@
   --hemo-color-text-secondary: #25282b;
   --hemo-color-text-secondary-opaque: rgba(37, 40, 43, 0.2);
   --hemo-color-text-primary: #f2f2f2;
-  --black-100: #25282B;
+  --black-100: #25282b;
   --el-color-primary: var(--hemo-color-primary) !important;
   --el-color-primary-light-3: var(--hemo-color-primary) !important;
   --el-color-primary-light-5: var(--hemo-color-primary-dark) !important;
@@ -36,16 +36,8 @@
 }
 
 @font-face {
-  font-family:
-    "Roboto",
-    monospace,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif;
+  font-family: "Lato", "Roboto", monospace, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
   src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
   font-display: swap;
   font-style: normal;
@@ -64,16 +56,8 @@ body {
   padding: 0;
   overflow-x: -moz-hidden-unscrollable;
   overflow-x: clip;
-  font-family:
-    "Roboto",
-    monospace,
-    -apple-system,
-    BlinkMacSystemFont,
-    "Segoe UI",
-    "Helvetica Neue",
-    Arial,
-    "Noto Sans",
-    sans-serif;
+  font-family: "Lato", "Roboto", monospace, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
 }
 
 #__nuxt {
@@ -111,4 +95,4 @@ a:visited {
 
 * {
   -webkit-tap-highlight-color: transparent;
-}
+}

components/CompetitionSummary.vue

@@ -1,42 +1,71 @@
 <template>
-  <NuxtLink class="summaryBox" to="/competitionRank">
+  <NuxtLink class="summaryBox" :to="`/competition/${slug}`">
     <div :style="{ flex: 9 }">
-      <h3 :style="{ margin: '0 0 10px 0' }">
+      <h4 class="card-title">
         {{ title }}
-      </h3>
-      <span> INICIO: {{ start }} </span>
-      <br>
-      <br>
-      <span> TÉRMINO: {{ end }} </span>
+      </h4>
+
+      <h5 class="card-letter">INÍCIO: {{ formatDate(start) }}</h5>
+      <h5 class="card-letter">TÉRMINO: {{ formatDate(end) }}</h5>
     </div>
     <div class="arrow">
-      <img :style="{ height: '50px' }" src="/images/bodylessArrow.svg">
+      <img class="arrow-img" src="/images/bodylessArrow.svg" />
     </div>
   </NuxtLink>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import dayjs from "dayjs";
+
 defineProps({
-  title: String,
-  start: Date,
-  end: Date
-})
+  slug: {
+    type: String,
+    required: true,
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  start: {
+    type: Date,
+    required: true,
+  },
+  end: {
+    type: Date,
+    required: true,
+  },
+});
+
+const formatDate = (date: any) => {
+  return dayjs(date).format("DD/MM/YYYY [ÀS] HH:mm[H]");
+};
 </script>
 
 <style>
-.summaryBox {
-  display: flex;
-  border: solid #dbdde0 2px;
-  margin-bottom: 20px;
-  border-radius: 15px;
-  padding: 15px;
-  cursor: pointer;
-}
+  .summaryBox {
+    display: flex;
+    border: solid #dbdde0 2px;
+    border-radius: 15px;
+    padding: 15px;
+    cursor: pointer;
+  }
+
+  .card-title {
+    font-size: 18px;
+  }
+  .card-letter {
+    color: #52575c;
+    letter-spacing: 0.5px;
+    font-weight: 500;
+  }
 
-.arrow {
-  flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+  .arrow {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .arrow-img {
+    height: 50px;
+  }
 </style>

package.json

@@ -18,10 +18,10 @@
     "@types/jsonwebtoken": "^9.0.5",
     "dayjs": "^1.11.10",
     "element-plus": "^2.4.3",
+    "nuxt": "^3.11.1",
     "eslint": "^8.56.0",
     "jsonwebtoken": "^9.0.2",
     "lodash": "^4.17.21",
-    "nuxt": "^3.8.0",
     "nuxt-bugsnag": "^7.2.3",
     "nuxt-vercel-analytics": "^1.0.0",
     "slugify": "^1.6.6",