alpine-theme/components/content/Gallery.vue at e9d6b6763439bc255267b35b903ba9d866b0300c · clemcode/alpine-theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script setup lang="ts">
import type { PropType } from 'vue'

defineProps({
  images: {
    type: Array as PropType<string[]>,
    default: () => []
  }
})
</script>

<template>
  <section class="gallery">
    <div
      class="layout"
    >
      <NuxtPicture
        v-for="(image, index) in images"
        :key="index"
        :src="image"
        :width="418"
        :height="236"
        loading="lazy"
      />
    </div>
  </section>
</template>

<style lang="ts">
css({
  '.gallery': {
    '.layout': {
      display: 'grid',
      gap: '{space.8}',
      my: '{space.16}',
      '--cols': 1,
      gridTemplateColumns: 'repeat(var(--cols), minmax(0, 1fr))',
      '@md': {
        '--cols': (props) => props.images.length < 2 ? props.images.length : 2
      },
      img: {
        objectFit: 'cover',
        width: '100%',
        aspectRatio: '16 / 9',
        borderRadius: '{radii.md}'
      }
    }
  }
})
</style>