From 8fcc1f6ceee13c2c26b8916f20b39be2e02b8de1 Mon Sep 17 00:00:00 2001
From: Cadiducho <cadiducho@gmail.com>
Date: Fri, 8 Mar 2024 23:31:51 +0100
Subject: [PATCH] create PCard

---
 src/components/gps/CircuitCard.vue |  9 ++++++---
 src/components/lib/PCard.vue       | 14 ++++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 src/components/lib/PCard.vue

diff --git a/src/components/gps/CircuitCard.vue b/src/components/gps/CircuitCard.vue
index 199ac47..0801a83 100644
--- a/src/components/gps/CircuitCard.vue
+++ b/src/components/gps/CircuitCard.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card bg-white dark:bg-gray-900 rounded shadow-md rounded-lg relative max-w-full">
+    <PCard>
         <div class="block relative">
             <figure class="block relative">
                 <img v-if="circuit.hasLogoImage" :src="circuit.logoImage()" alt="Logo image">
@@ -26,9 +26,9 @@
                 <p v-if="hasLaps()" class="mt-2"><b>Vueltas: </b>{{ laps }}</p>
                 <p v-if="hasLaps()" class="mt-2"><b>Distancia total: </b>{{ (laps * variant.distance).toFixed(2) }}km</p>
             </div>
-            <o-button variant="info is-light is-fullwidth" tag="router-link" :to="circuit.circuitLink()">Más datos del circuito</o-button>
+            <PButton expanded tag="router-link" :to="circuit.circuitLink()" color="info" type="soft">Más datos del circuito</PButton>
         </div>
-    </div>
+    </PCard>
 </template>
 
 <script lang="ts">
@@ -39,9 +39,12 @@
     import {useAuthStore} from "@/store/authStore";
     import {useCommunityStore} from "@/store/communityStore";
     import {CircuitVariant} from "@/types/CircuitVariant";
+    import PCard from "@/components/lib/PCard.vue";
+    import PButton from "@/components/lib/forms/PButton.vue";
 
     export default defineComponent({
         name: "CircuitCard",
+        components: {PButton, PCard},
         props: {
             circuit: {
                 type: Object as PropType<Circuit>,
diff --git a/src/components/lib/PCard.vue b/src/components/lib/PCard.vue
new file mode 100644
index 0000000..f030196
--- /dev/null
+++ b/src/components/lib/PCard.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+interface Props {
+    tag?: 'article' | 'div' | 'router-link';
+}
+const props = withDefaults(defineProps<Props>(), {
+    tag: 'article'
+});
+</script>
+
+<template>
+    <component :is="tag" class="bg-contrast dark:bg-contrast-dark shadow-md rounded-lg max-w-full">
+        <slot></slot>
+    </component>
+</template>
\ No newline at end of file