RunForge-Frontend/src/components/skeleton/StoreGridSkeleton.vue

<template>
  <div class="store-grid-skeleton" :style="gridStyle">
    <article v-for="n in count" :key="n" class="store-grid-skeleton__card">
      <div class="store-grid-skeleton__visual">
        <a-skeleton-shape size="large" />
      </div>
      <div class="store-grid-skeleton__body">
        <a-skeleton-line :widths="['75%']" :rows="1" />
        <a-skeleton-line :widths="['100%', '90%']" :rows="2" />
        <a-skeleton-line :widths="['40%', '35%']" :rows="1" />
      </div>
    </article>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  count: { type: Number, default: 6 },
  minWidth: { type: String, default: '280px' }
})

const gridStyle = computed(() => ({
  gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${props.minWidth}), 1fr))`
}))
</script>

<style scoped lang="less">
@import '@/styles/store-theme.less';

.store-grid-skeleton {
  display: grid;
  gap: 16px;
  width: 100%;

  &__card {
    background: @store-card-bg;
    border: 1px solid @store-card-border;
    border-radius: @store-radius;
    overflow: hidden;
  }

  &__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: fade(@store-accent, 8%);
    border-bottom: 1px solid @store-card-border;
  }

  &__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}
</style>