nuxt__ui/test/components/__snapshots__/BlogPosts.spec.ts.snap

// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`BlogPosts > renders with as correctly 1`] = `
"<section data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
      <!--v-if-->
      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
      </div>
      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
      <div class="mt-1 text-base text-pretty text-muted">Description</div>
      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
          <div class="">
            <!--v-if-->
            <p class="font-medium text-highlighted text-sm">Author</p>
            <!--v-if-->
          </div>
        </div>
      </div>
    </div>
    <!--v-if-->
  </article>
</section>"
`;

exports[`BlogPosts > renders with class correctly 1`] = `
"<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-y-12">
  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
      <!--v-if-->
      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
      </div>
      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
      <div class="mt-1 text-base text-pretty text-muted">Description</div>
      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
          <div class="">
            <!--v-if-->
            <p class="font-medium text-highlighted text-sm">Author</p>
            <!--v-if-->
          </div>
        </div>
      </div>
    </div>
    <!--v-if-->
  </article>
</div>"
`;

exports[`BlogPosts > renders with default slot correctly 1`] = `"<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">Default slot</div>"`;

exports[`BlogPosts > renders with orientation vertical correctly 1`] = `
"<div data-orientation="vertical" class="flex flex-col gap-8 lg:gap-y-16">
  <article data-orientation="horizontal" class="relative group/blog-post flex flex-col rounded-lg overflow-hidden lg:grid lg:grid-cols-2 lg:items-center gap-x-8 bg-default ring ring-default">
    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
    <div class="min-w-0 flex-1 flex flex-col justify-center p-4 sm:p-6 lg:px-0">
      <!--v-if-->
      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
      </div>
      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
      <div class="mt-1 text-base text-pretty text-muted">Description</div>
      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
          <div class="">
            <!--v-if-->
            <p class="font-medium text-highlighted text-sm">Author</p>
            <!--v-if-->
          </div>
        </div>
      </div>
    </div>
    <!--v-if-->
  </article>
</div>"
`;

exports[`BlogPosts > renders with posts correctly 1`] = `
"<div data-orientation="horizontal" class="flex flex-col gap-8 lg:gap-y-16 sm:grid sm:grid-cols-2 lg:grid-cols-3">
  <article data-orientation="vertical" class="relative group/blog-post rounded-lg overflow-hidden flex flex-col bg-default ring ring-default">
    <div class="relative overflow-hidden aspect-[16/9] w-full pointer-events-none"><img alt="Image alt" src="https://picsum.photos/640/360" class="object-cover object-top w-full h-full"></div>
    <div class="min-w-0 flex-1 flex flex-col p-4 sm:p-6">
      <!--v-if-->
      <div class="flex items-center gap-2 mb-2"><span class="font-medium inline-flex items-center text-xs px-2 py-1 gap-1 rounded-md ring ring-inset ring-accented text-default bg-elevated"><!--v-if--><span class="truncate">Badge</span>
        <!--v-if--></span><time datetime="2024-12-13T09:32:32.598Z" class="text-sm text-toned">Dec 13, 2024</time>
      </div>
      <h2 class="text-xl text-pretty font-semibold text-highlighted">Title</h2>
      <div class="mt-1 text-base text-pretty text-muted">Description</div>
      <div class="pt-4 mt-auto flex flex-wrap gap-x-3 gap-y-1.5">
        <div data-orientation="horizontal" class="relative group/user flex items-center gap-2"><span class="inline-flex items-center justify-center select-none rounded-full align-middle bg-elevated size-8 text-base shrink-0"><img src="https://i.pravatar.cc/120?img=1" alt="Author" width="32" height="32" class="h-full w-full rounded-[inherit] object-cover"></span>
          <div class="">
            <!--v-if-->
            <p class="font-medium text-highlighted text-sm">Author</p>
            <!--v-if-->
          </div>
        </div>
      </div>
    </div>
    <!--v-if-->
  </article>
</div>"
`;