Bloglist1

1import { Avatar, AvatarFallback, AvatarImage } from "@/ui/avatar";
2import {
3  Pagination,
4  PaginationContent,
5  PaginationItem,
6  PaginationLink,
7  PaginationNext,
8  PaginationPrevious,
9} from "@/ui/pagination";
10 
11export default function Basic() {
12  return (
13    <section className="mx-auto max-w-7xl px-4 py-12">
14      <div className="grid grid-cols-1 gap-8 text-sm md:grid-cols-2 lg:grid-cols-3">
15        <a href="#" className="block overflow-hidden rounded-lg border">
16          <img loading="lazy" decoding="async"
17            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
18            alt="Blog Post Image"
19            width={600}
20            height={160}
21            className="h-40 w-full border-b object-cover object-center"
22          />
23          <div className="p-4">
24            <h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
25              Mastering the Art of Minimalist Design
26            </h3>
27            <p className="mb-4 line-clamp-3 text-muted-foreground">
28              Discover the power of minimalism in design and how it can
29              transform your projects. Learn the key principles and techniques
30              to create clean, elegant, and impactful designs.
31            </p>
32            <div className="flex items-center font-medium">
33              <Avatar className="mr-2 size-6">
34                <AvatarImage src="https://mynaui.com/avatars/avatar-01.webp" />
35                <AvatarFallback>AB</AvatarFallback>
36              </Avatar>
37              <span>Praveen Juge</span>
38            </div>
39          </div>
40        </a>
41        <a href="#" className="block overflow-hidden rounded-lg border">
42          <img loading="lazy" decoding="async"
43            src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
44            alt="Blog Post Image"
45            width={600}
46            height={160}
47            className="h-40 w-full border-b object-cover object-center"
48          />
49          <div className="p-4">
50            <h3 className="mb-1.5 line-clamp-1 text-lg font-semibold tracking-tight">
51              Unleashing the Potential of React Hooks
52            </h3>
53            <p className="mb-4 line-clamp-3 text-muted-foreground">
54              Explore the power of React Hooks and learn how to leverage them to
55              build more efficient and maintainable web applications. Discover
56              the latest best practices and techniques.
57// … truncated