review 2 fixes

src/components/Card/TheCard.vue

@@ -1,11 +1,10 @@
 <template>
-  <a :href="href" :class="cardClasses">
+  <component :is="wrapperType" :href="href" :class="cardClasses">
     <img v-if="imgSrc" class="rounded-t-lg" :class="horizontalImageClasses" :src="imgSrc" :alt="imgAlt"/>
     <div class="p-6">
       <slot />
     </div>
-    
-  </a>
+  </component>
 </template>
 <script lang="ts" setup>
 import { computed, toRefs } from 'vue'
@@ -32,6 +31,7 @@ const props = defineProps({
   },
 })
 
-const { cardClasses, horizontalImageClasses } = useCardsClasses(props)
+const { cardClasses, horizontalImageClasses } = useCardsClasses(toRefs(props))
+const wrapperType = computed(() => props.href ? 'a' : 'div')
 
 </script>

src/components/Card/composables/useCardClasses.ts

@@ -1,9 +1,9 @@
 import type { Ref } from 'vue'
-import { computed, useSlots } from 'vue'
+import { computed } from 'vue'
 import type { CardsVariant } from '../types'
 
 export type UseCardsClassesProps = {
-    variant: CardsVariant
+    variant: Ref<CardsVariant>
 }
 
 export function useCardsClasses(props: UseCardsClassesProps): {
@@ -11,17 +11,17 @@ export function useCardsClasses(props: UseCardsClassesProps): {
     horizontalImageClasses: Ref<string>
 } {
     const cardClasses = computed(() => {
-        if(props.variant === 'default') 
+        if(props.variant.value === 'default') 
             return 'block max-w-sm bg-white rounded-lg border border-gray-200 shadow-md hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700'
-        else if(props.variant === 'image')
+        else if(props.variant.value === 'image')
             return 'max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700'
-        else if(props.variant === 'horizontal')
+        else if(props.variant.value === 'horizontal')
             return 'flex flex-col items-center bg-white rounded-lg border shadow-md md:flex-row md:max-w-xl hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700'
         return ''
     })
 
     const horizontalImageClasses = computed(() => {
-        if(props.variant === 'horizontal')
+        if(props.variant.value === 'horizontal')
             return 'object-cover w-full h-96 rounded-t-lg md:h-auto md:w-48 md:rounded-none md:rounded-l-lg'
         return ''
     })

src/index.ts

@@ -13,9 +13,7 @@ export { default as Avatar } from './components/Avatar/Avatar.vue'
 export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
 export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'
 export { default as Accordion } from './components/Accordion/Accordion.vue'
-
 export { default as Badge } from './components/Badge/Badge.vue'
-export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
 export { default as TheCard } from './components/Card/TheCard.vue'
 export { default as Carousel } from './components/Carousel/Carousel.vue'
 export { default as Footer } from './components/Footer/Footer.vue'