My-KOPKB/fe/src/views/BlogLayout2.vue

<script lang="ts" setup>
import _ from 'lodash'
import fakers from '@/utils/faker'
import { AvatarRoot, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Lucide } from '@/components/ui/lucide'
import { MenuRoot, MenuTrigger, MenuPositioner, MenuContent, MenuItem } from '@/components/ui/menu'

import {
  PaginationContext,
  PaginationRoot,
  PaginationItem,
  PaginationPrevTrigger,
  PaginationNextTrigger,
  PaginationEllipsis,
} from '@/components/ui/pagination'
import {
  TooltipRoot,
  TooltipTrigger,
  TooltipPositioner,
  TooltipContent,
} from '@/components/ui/tooltip'
</script>

<template>
  <div class="flex flex-col items-center sm:flex-row">
    <h2 class="mr-auto text-lg font-medium">Blog Layout</h2>
    <div class="mt-4 flex w-full sm:mt-0 sm:w-auto">
      <Button look="outline" class="mr-2 shadow-sm" variant="primary"> Add New Post </Button>
      <MenuRoot class="w-auto ml-auto sm:ml-0">
        <MenuTrigger as-child>
          <Box class="px-2" as-child>
            <Button variant="ghost" class="box flex items-center">
              <span class="flex h-5 w-5 items-center justify-center">
                <Lucide class="h-4 w-4" icon="Plus" />
              </span>
            </Button>
          </Box>
        </MenuTrigger>
        <MenuPositioner>
          <MenuContent class="w-40">
            <MenuItem value="share">
              <Lucide class="mr-2 size-4" icon="Share" /> Share Post
            </MenuItem>
            <MenuItem value="download">
              <Lucide class="mr-2 size-4" icon="Download" /> Download Post
            </MenuItem>
          </MenuContent>
        </MenuPositioner>
      </MenuRoot>
    </div>
  </div>
  <div class="mt-5 grid grid-cols-12 gap-6">
    <!-- BEGIN: Blog Layout -->
    <template v-for="(faker, fakerKey) in _.take(fakers, 6)" :key="fakerKey">
      <Box class="col-span-12 p-0 md:col-span-6">
        <div
          class="image-fit h-[320px] before:absolute before:left-0 before:top-0 before:z-10 before:block before:h-full before:w-full before:rounded-t-xl before:bg-gradient-to-t before:from-black/90 before:to-black/10">
          <img class="rounded-t-xl" :src="faker.images[0]" alt="Midone - Tailwind Admin Dashboard Template" />
          <div class="absolute z-10 flex w-full items-center px-5 pt-6">
            <AvatarRoot class="size-10 rounded-full border-2 border-white">
              <AvatarFallback>PA</AvatarFallback>
              <AvatarImage :src="faker.photos[0]" alt="avatar" />
            </AvatarRoot>
            <div class="ml-3 mr-auto text-white">
              <a class="font-medium" href="">
                {{ faker.users[0]?.name }}
              </a>
              <div class="mt-0.5 text-xs">
                {{ faker.formattedTimes[0] }}
              </div>
            </div>
            <MenuRoot class="w-auto ml-3">
              <MenuTrigger as-child>
                <a class="flex size-8 items-center justify-center rounded-full bg-white/20" href="#">
                  <Lucide class="size-4 text-white" icon="MoreVertical" />
                </a>
              </MenuTrigger>
              <MenuPositioner>
                <MenuContent class="w-40">
                  <MenuItem value="edit">
                    <Lucide class="mr-2 size-4" icon="Edit" /> Edit Post
                  </MenuItem>
                  <MenuItem value="delete">
                    <Lucide class="mr-2 size-4" icon="Trash" /> Delete Post
                  </MenuItem>
                </MenuContent>
              </MenuPositioner>
            </MenuRoot>
          </div>
          <div class="absolute bottom-0 z-10 px-5 pb-6 text-white">
            <span class="rounded-lg bg-white/20 px-2 py-1">
              {{ faker.products[0]?.category }}
            </span>
            <a class="mt-3 block text-xl font-medium" href="">
              {{ faker.news[0]?.title }}
            </a>
          </div>
        </div>
        <div class="p-5 opacity-70">
          {{ faker.news[0]?.shortContent }}
        </div>
        <div class="flex items-center border-t border-foreground/15 px-5 py-3">
          <TooltipRoot>
            <TooltipTrigger as-child>
              <a class="bg-foreground/5 mr-2 flex size-8 items-center justify-center rounded-full border border-foreground/15"
                href="">
                <Lucide class="size-3" icon="Bookmark" />
              </a>
            </TooltipTrigger>
            <TooltipPositioner>
              <TooltipContent>Bookmark</TooltipContent>
            </TooltipPositioner>
          </TooltipRoot>
          <div class="mr-2 flex">
            <AvatarRoot class="bg-background size-8 rounded-full" :title="`Uploaded at ${faker.dates[0]}`">
              <AvatarFallback>PA</AvatarFallback>
              <AvatarImage :src="faker.images[0]" alt="avatar" />
            </AvatarRoot>
            <AvatarRoot class="bg-background -ml-4 size-8 rounded-full" :title="`Uploaded at ${faker.dates[1]}`">
              <AvatarFallback>PA</AvatarFallback>
              <AvatarImage :src="faker.images[1]" alt="avatar" />
            </AvatarRoot>
            <AvatarRoot class="bg-background -ml-4 size-8 rounded-full" :title="`Uploaded at ${faker.dates[2]}`">
              <AvatarFallback>PA</AvatarFallback>
              <AvatarImage :src="faker.images[2]" alt="avatar" />
            </AvatarRoot>
          </div>
          <TooltipRoot>
            <TooltipTrigger as-child>
              <a class="bg-primary/10 border-primary/20 text-primary ml-auto flex size-8 items-center justify-center rounded-full border"
                href="">
                <Lucide class="size-3" icon="Share" />
              </a>
            </TooltipTrigger>
            <TooltipPositioner>
              <TooltipContent>Share</TooltipContent>
            </TooltipPositioner>
          </TooltipRoot>
          <TooltipRoot>
            <TooltipTrigger as-child>
              <a class="bg-primary ml-2 flex size-8 items-center justify-center rounded-full text-white" href="">
                <Lucide class="size-3" icon="Share" />
              </a>
            </TooltipTrigger>
            <TooltipPositioner>
              <TooltipContent>Download PDF</TooltipContent>
            </TooltipPositioner>
          </TooltipRoot>
        </div>
        <div class="border-t border-foreground/15 px-5 pb-5 pt-3">
          <div class="flex w-full text-xs opacity-70 sm:text-sm">
            <div class="mr-2">
              Comments:
              <span class="font-medium">{{ faker.totals[0] }}</span>
            </div>
            <div class="mr-2">
              Views: <span class="font-medium">{{ faker.totals[1] }}k</span>
            </div>
            <div class="ml-auto">
              Likes: <span class="font-medium">{{ faker.totals[2] }}k</span>
            </div>
          </div>
          <div class="mt-3 flex w-full items-center">
            <AvatarRoot class="mr-3 size-10 rounded-full">
              <AvatarFallback>PA</AvatarFallback>
              <AvatarImage :src="faker.photos[0]" alt="avatar" />
            </AvatarRoot>
            <div class="relative flex-1">
              <Input class="rounded-full" type="text" placeholder="Post a comment..." />
              <Lucide class="absolute inset-y-0 right-0 my-auto mr-3 size-4 opacity-70" icon="Smile" />
            </div>
          </div>
        </div>
      </Box>
    </template>
    <!-- END: Blog Layout -->
    <!-- BEGIN: Pagination -->
    <div class="col-span-12 flex flex-wrap items-center sm:flex-row sm:flex-nowrap">
      <PaginationRoot :count="5000" :pageSize="10" :siblingCount="2" class="w-full sm:mr-auto sm:w-auto">
        <PaginationPrevTrigger>
          <Lucide class="size-4" icon="ChevronLeft" />
        </PaginationPrevTrigger>
        <PaginationContext v-slot="{ pagination }">
          <template v-for="(page, index) in pagination?.pages" :key="index">
            <PaginationItem v-if="page.type === 'page'" v-bind="{ ...page }">
              {{ page.value }}
            </PaginationItem>
            <PaginationEllipsis v-else :index="index" />
          </template>
        </PaginationContext>
        <PaginationNextTrigger>
          <Lucide class="size-4" icon="ChevronRight" />
        </PaginationNextTrigger>
      </PaginationRoot>
      <NativeSelect class="box mt-3 w-20 sm:mt-0">
        <NativeSelectOption>10</NativeSelectOption>
        <NativeSelectOption>25</NativeSelectOption>
        <NativeSelectOption>35</NativeSelectOption>
        <NativeSelectOption>50</NativeSelectOption>
      </NativeSelect>
    </div>
    <!-- END: Pagination -->
  </div>
</template>