blogs-1

1import { cn } from "@/lib/utils";
2import { FullWidthDivider } from "@/components/full-width-divider";
3 
4const blogs = [
5	{
6		title: "The New Design",
7		date: "May 20 2025",
8		description:
9			"What everyone new to the field should know, and how we can help.",
10		href: "#",
11	},
12	{
13		title: "Letter Club",
14		date: "Aug 14 2025",
15		description: "An ode to the slow web.",
16		href: "#",
17	},
18	{
19		title: "Have the Coffee",
20		date: "Sep 19 2025",
21		description: "Carve space out for oppurtunity.",
22		href: "#",
23	},
24	{
25		title: "Shadcn UI",
26		date: "Oct 12 2025",
27		description: "Building modern applications with reusable components.",
28		href: "#",
29	},
30	{
31		title: "Fesgin",
32		date: "Nov 23 2025",
33		description: "Exploring the intersection of design and development.",
34		href: "#",
35	},
36];
37 
38export function BlogsSection() {
39	return (
40		<div className="mx-auto flex min-h-screen w-full max-w-3xl flex-col justify-start md:border-x">
41			<div className="space-y-2 px-4 py-8 md:py-12">
42				<h1 className="font-semibold text-2xl tracking-wide md:text-4xl">
43					Latest Blogs
44				</h1>
45				<p className="text-muted-foreground text-sm">
46					Discover the latest trends and insights in the world of design and
47					technology.
48				</p>
49			</div>
50 
51			<div className="relative">
52				<FullWidthDivider />
53				<div className="divide-y">
54					{blogs.map((blog) => (
55						<BlogCard {...blog} key={blog.title} />
56					))}
57				</div>
58				<FullWidthDivider />
59			</div>
60		</div>
61	);
62}
63 
64function BlogCard({
65	title,
66	date,
67	description,
68	className,
69	...props
70}: React.ComponentProps<"a"> & {
71	title: string;
72	date: string;
73	description: string;
74}) {
75	return (
76		<a
77			className={cn(
78				"group flex h-24 w-full flex-col justify-center gap-y-1 p-4 hover:cursor-pointer hover:bg-accent/30 active:bg-accent dark:active:bg-accent/50",
79				className
80			)}
81			{...props}
82		>
83			<div className="relative flex items-end justify-center gap-2">
84				<h3 className="whitespace-nowrap font-medium text-foreground text-lg md:text-xl">
85					{title}
86				</h3>
87				<span className="mb-[6px] w-full border-b-2 border-dashed" />
88				<span className="whitespace-nowrap font-mono text-muted-foreground text-xs uppercase group-hover:text-foreground md:text-sm">
89					{date}
90				</span>
91			</div>
92			<div className="max-w-sm text-muted-foreground text-sm group-hover:text-foreground md:max-w-full md:text-base">
93				{description}
94			</div>
95		</a>
96	);
97}