chore: updating packages and reusing code

Author: moebiusmania

components/News.vue

@@ -13,26 +13,23 @@ const isPending = status.value === "pending";
 </script>
 
 <template>
-  <article class="card bg-white shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title">ATM informa</h2>
-      <ul class="list-none">
-        <li
-          v-for="(item, index) in data"
-          :key="index"
-          :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+  <Card title="ATM informa">
+    <ul class="list-none">
+      <li
+        v-for="(item, index) in data"
+        :key="index"
+        :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+      >
+        <div v-if="isPending" :class="loadingClass()"></div>
+        <a
+          v-else
+          :href="item.url"
+          target="_blank"
+          rel="nofollow noopener"
+          class="hover:underline hover:text-primary"
+          ><Icon name="ri:external-link-fill" /> {{ item.text }}</a
         >
-          <div v-if="isPending" :class="loadingClass()"></div>
-          <a
-            v-else
-            :href="item.url"
-            target="_blank"
-            rel="nofollow noopener"
-            class="hover:underline hover:text-primary"
-            ><Icon name="ri:external-link-fill" /> {{ item.text }}</a
-          >
-        </li>
-      </ul>
-    </div>
-  </article>
+      </li>
+    </ul>
+  </Card>
 </template>

components/Status.vue

@@ -19,25 +19,22 @@ if (error.value) console.error("ERROR from useFetch: ", error.value);
 </script>
 
 <template>
-  <article class="card bg-white shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title">Status linee MM</h2>
-      <ul>
-        <li
-          v-for="(item, index) in data"
-          :key="index"
-          :class="isPending ? 'my-2 animate-pulse' : 'my-2'"
+  <Card title="Status linee MM">
+    <ul>
+      <li
+        v-for="(item, index) in data"
+        :key="index"
+        :class="isPending ? 'my-2 animate-pulse' : 'my-2'"
+      >
+        <div :class="isPending ? loadingClass() : lineClass(item.line)">
+          <span v-if="!isPending" class="text-base-100">{{ item.line }}</span>
+        </div>
+        {{ " " }}
+        <!-- <span v-if="!isPending">{{ item.text }} |{{ " " }} {{ item.status }}{{ " " }}</span> -->
+        <span v-if="!isPending" :class="notActive(item.status)"
+          >{{ " " }} {{ item.status }}</span
         >
-          <div :class="isPending ? loadingClass() : lineClass(item.line)">
-            <span v-if="!isPending" class="text-base-100">{{ item.line }}</span>
-          </div>
-          {{ " " }}
-          <!-- <span v-if="!isPending">{{ item.text }} |{{ " " }} {{ item.status }}{{ " " }}</span> -->
-          <span v-if="!isPending" :class="notActive(item.status)"
-            >{{ " " }} {{ item.status }}</span
-          >
-        </li>
-      </ul>
-    </div>
-  </article>
+      </li>
+    </ul>
+  </Card>
 </template>

components/Traffic.vue

@@ -11,26 +11,23 @@ if (error.value) console.log("ERROR from useFetch: ", error.value);
 </script>
 
 <template>
-  <article class="card bg-white shadow-lg">
-    <div class="card-body">
-      <h2 class="card-title">Cambiamenti</h2>
-      <ul>
-        <li
-          v-for="(item, index) in data"
-          :key="index"
-          :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+  <Card title="Cambiamenti">
+    <ul>
+      <li
+        v-for="(item, index) in data"
+        :key="index"
+        :class="isPending ? 'my-2 animate-pulse' : 'my-2 align-middle'"
+      >
+        <div v-if="isPending" :class="loadingClass()"></div>
+        <a
+          v-else
+          :href="item.url"
+          target="_blank"
+          rel="nofollow noopener"
+          class="hover:underline hover:text-primary"
+          ><Icon name="ri:external-link-fill" /> {{ item.text }}</a
         >
-          <div v-if="isPending" :class="loadingClass()"></div>
-          <a
-            v-else
-            :href="item.url"
-            target="_blank"
-            rel="nofollow noopener"
-            class="hover:underline hover:text-primary"
-            ><Icon name="ri:external-link-fill" /> {{ item.text }}</a
-          >
-        </li>
-      </ul>
-    </div>
-  </article>
+      </li>
+    </ul>
+  </Card>
 </template>