Bloglist4

1import { Input } from "@/ui/input";
2import { ArrowRight, Search } from "@mynaui/icons-react";
3 
4export default function WithSidebar() {
5  return (
6    <section className="mx-auto grid max-w-7xl flex-1 grid-cols-1 gap-8 p-4 py-12 lg:grid-cols-4">
7      <div className="space-y-8 md:col-span-3">
8        <div className="grid gap-8">
9          <article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
10            <img loading="lazy" decoding="async"
11              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
12              width="200"
13              height="120"
14              alt="Blog post image"
15              className="h-36 rounded-md object-cover"
16            />
17            <div className="space-y-2">
18              <h2 className="text-xl font-semibold">
19                <a href="#" className="hover:underline">
20                  The Future of Web Development
21                </a>
22              </h2>
23              <div className="text-muted-foreground">
24                <span>Praveen Juge</span>
25                <span className="mx-2">•</span>
26                <span>May 15, 2023</span>
27              </div>
28              <p className="line-clamp-3 text-muted-foreground">
29                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
30                euismod, nisl nec ultricies lacinia, nisl nisl aliquam nisl,
31                eget aliquam nisl nisl sit amet nisl.
32              </p>
33            </div>
34          </article>
35          <article className="grid grid-cols-[200px_1fr] gap-6 text-sm">
36            <img loading="lazy" decoding="async"
37              src="https://images.unsplash.com/photo-1698044048234-2e7f6c4e6aca?q=80&w=1000&auto=format"
38              width="200"
39              height="120"
40              alt="Blog post image"
41              className="h-36 rounded-md object-cover"
42            />
43            <div className="space-y-2">
44              <h2 className="text-xl font-semibold">
45                <a href="#" className="hover:underline">
46                  Mastering Responsive Design
47                </a>
48              </h2>
49              <div className="text-muted-foreground">
50                <span>Jane Smith</span>
51                <span className="mx-2">•</span>
52                <span>April 20, 2023</span>
53              </div>
54              <p className="line-clamp-3 text-muted-foreground">
55                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
56// … truncated