<template>
  <UContainer class="flex flex-col gap-5" as="section">
    <ULink
      class="text-sm text-gray-500 flex flex-row gap-1 items-center group"
      to="/articles"
    >
      Recent articles
      <UIcon
        class="opacity-0 group-hover:opacity-100 transition-opacity"
        name="i-heroicons-arrow-right"
    /></ULink>

    <ContentList :query="{ sort: [{ date: -1 }], limit: 2 }" v-slot="{ list }">
      <div v-for="article in list" :key="article._path">
        <ArticleListing :article="article" />
      </div>
    </ContentList>
  </UContainer>
</template>
