Blog Card One

1'use client';
2 
3import * as React from 'react';
4import Link from 'next/link';
5import { Bookmark, MoreVertical } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8export type BlogCardOneAuthor = {
9  name: string;
10  avatar?: string; // URL
11  href?: string;
12};
13 
14export type BlogCardOneProps = {
15  /** Main link target for the whole card */
16  href?: string;
17  /** Category tag (clickable) */
18  category?: { label: string; href?: string };
19  /** Title (required for a11y, used as aria-label on the card) */
20  title: string;
21  /** Short summary */
22  excerpt?: string;
23  /** Image (decorative if alt is empty) */
24  image?: { src: string; alt?: string };
25  /** Author & date */
26  author?: BlogCardOneAuthor;
27  dateISO?: string; // e.g. "2024-08-15"
28  dateLabel?: string; // e.g. "Aug 15, 2024"
29 
30  /** Buttons (bookmark/menu) visibility */
31  showActions?: boolean;
32  /** Called when bookmark clicked */
33  onBookmark?: () => void;
34  /** Called when menu clicked */
35  onMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void;
36 
37  /** Style variant */
38  variant?: 'image-left' | 'image-top';
39 
40  /** Slot overrides */
41  className?: string; // outer card
42  imageClassName?: string;
43  bodyClassName?: string;
44  titleClassName?: string;
45  excerptClassName?: string;
46  tagClassName?: string;
47};
48 
49export function BlogCardOne({
50  href,
51  category,
52  title,
53  excerpt,
54  image,
55  author,
56  dateISO,
57  dateLabel,
58  showActions = true,
59  onBookmark,
60  onMenu,
61  variant = 'image-left',
62  className,
63  imageClassName,
64  bodyClassName,
65  titleClassName,
66  excerptClassName,
67  tagClassName,
68}: BlogCardOneProps) {
69  const Wrapper: React.ElementType = href ? Link : 'article';
70  const wrapperProps = href
71    ? { href, 'aria-label': title }
72    : { role: 'article' };
73 
74  const Figure = (
75    <figure
76      className={cn(
77        'relative shrink-0 overflow-hidden rounded-l-xl sm:rounded-xl',
78        variant === 'image-left' ? 'h-44 w-44 sm:h-40 sm:w-56' : 'h-48 w-full',
79        imageClassName
80      )}
81    >
82      {image?.src ? (
83        // eslint-disable-next-line @next/next/no-img-element
84        <img
85          src={image.src}
86          alt={image.alt ?? ''}
87          className='h-full w-full object-cover'
88          loading='lazy'
89        />
90      ) : (
91        <div className='grid h-full w-full place-items-center bg-zinc-100 text-zinc-400 dark:bg-zinc-800'>
92          <span className='text-xs'>No image</span>
93        </div>
94      )}
95    </figure>
96  );
97 
98  return (
99    <Wrapper
100// … truncated