ShimmerCard Component

shimmercard.vue

<template>
  <div
    class="p-[1px] rounded-3xl h-full overflow-hidden"
    :class="containerClass"
    :style="{ backgroundImage: borderGradient }"
  >
    <div
      class="p-8 rounded-3xl flex flex-col justify-center items-center gap-2 h-full relative text-center"
      :style="{ backgroundImage: innerGradient }"
      :class="innerClass"
    >
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  /** Background gradient for the outer shimmer border */
  borderGradient: {
    type: String,
    default:
      'linear-gradient(104.59deg, #ffffff4d .76%, #ffffff14 32.78%, #ffffff38 69.11%, #ffffff05 99%)'
  },
  /** Background gradient for the card content */
  innerGradient: {
    type: String,
    default: 'linear-gradient(-45deg, #131313, #262525)'
  },
  /** Additional Tailwind classes for the outer container */
  containerClass: {
    type: String,
    default:
      'col-span-2 md:col-span-1 row-span-1 md:row-span-2 row-start-1 md:row-start-1 -md:*:flex-row -md:*:items-center'
  },
  /** Additional Tailwind classes for the inner content box */
  innerClass: {
    type: String,
    default: ''
  }
})
</script>