<template>
  <div>
    <h2 class="sr-only">Videos</h2>

    <div
      class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
    >
      <div v-for="video in videos" :key="video.id" class="group">
        <VideoPreview :video="video" />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'VideoList',

  props: {
    videos: {
      type: Array,
      default: () => {
        return []
      },
      required: true,
    },
  },
})
</script>
