Blog Card Three

1'use client';
2 
3import * as React from 'react';
4import Link from 'next/link';
5import { ThumbsUp, Bookmark } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8export type BlogCardThreeMeta = {
9  author?: { name: string; avatar?: string; href?: string };
10  readLabel?: string; // "2 min read"
11};
12 
13export type BlogCardThreeProps = {
14  /** Whole card link */
15  href?: string;
16 
17  /** Title */
18  title: string;
19 
20  /** Small square thumbnail */
21  thumb?: { src: string; alt?: string };
22 
23  /** Meta row */
24  meta?: BlogCardThreeMeta;
25 
26  /** Actions */
27  onLike?: () => void;
28  onBookmark?: () => void;
29 
30  /** Layout */
31  variant?: 'thumb-right' | 'thumb-left';
32 
33  /** Slot overrides */
34  className?: string;
35  titleClassName?: string;
36  thumbClassName?: string;
37  metaClassName?: string;
38  actionsClassName?: string;
39};
40 
41export function BlogCardThree({
42  href,
43  title,
44  thumb,
45  meta,
46  onLike,
47  onBookmark,
48  variant = 'thumb-right',
49  className,
50  titleClassName,
51  thumbClassName,
52  metaClassName,
53  actionsClassName,
54}: BlogCardThreeProps) {
55  const Wrapper: any = href ? Link : 'article';
56  const wrapperProps = href
57    ? { href, 'aria-label': title }
58    : { role: 'article' };
59 
60  const Thumb = (
61    <div
62      className={cn(
63        'relative h-20 w-20 shrink-0 overflow-hidden rounded-xl ring-1 ring-black/5 dark:ring-white/10',
64        thumbClassName
65      )}
66    >
67      {/* eslint-disable-next-line @next/next/no-img-element */}
68      {thumb?.src ? (
69        <img
70          src={thumb.src}
71          alt={thumb.alt ?? ''}
72          className='h-full w-full object-cover'
73          loading='lazy'
74        />
75      ) : (
76        <div className='grid h-full w-full place-items-center bg-zinc-100 text-xs text-zinc-400 dark:bg-zinc-800'>
77          no image
78        </div>
79      )}
80    </div>
81  );
82 
83  return (
84    <Wrapper
85      {...(wrapperProps as any)}
86      className={cn(
87        'group flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900',
88        'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500',
89        className
90      )}
91    >
92      {/* optional left thumb */}
93      {variant === 'thumb-left' && Thumb}
94 
95      <div className='flex min-w-0 flex-1 flex-col gap-6'>
96        {/* title */}
97        <h3
98          className={cn(
99            'line-clamp-2 text-[17px] leading-snug font-semibold text-zinc-900 group-hover:underline dark:text-zinc-50',
100// … truncated