<template>
  <meta-head title="Понравилось"></meta-head>

  <div class="xl:container xl:mx-auto px-2 md:px-3">
    <div class="mt-16 shadow-classic rounded-md bg-indigo-200">
      <div class="flex flex-col md:grid grid-cols-6 lg:grid-cols-5">
        <settings-menu />

        <div class="col-span-4">
          <div v-if="feeds.length" class="m-4 lg:m-8 grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-4 gap-2 lg:gap-4">
            <feed :feeds="feeds" :next-cursor="nextCursor" />
          </div>
          <div v-else class="m-4 lg:m-8 text-lg text-gray-light">
            Данных нет
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Layout from '@/Shared/Layout.vue'
import SettingsMenu from '@/Shared/LayoutParts/SettingsMenu.vue'
import MetaHead from '@/Shared/MetaHead.vue'
import Feed from '@/Shared/Feed/Feed.vue'
export default {
    components: {
        Feed,
        MetaHead,
        SettingsMenu,
    },
    layout: Layout,
    props: {
        feeds: Array,
        nextCursor: String,
    },
    methods: {},
}
</script>
