Blog Card Four

1'use client';
2 
3import * as React from 'react';
4import Link from 'next/link';
5import { CalendarDays } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8export type BlogCardFourProps = {
9  /** Entire card link; if omitted renders as plain <article>. */
10  href?: string;
11 
12  /** Cover image (top, rounded). */
13  image: { src: string; alt?: string };
14 
15  /** Title and short description. */
16  title: string;
17  excerpt?: string;
18 
19  /** Footer meta. */
20  author?: { name: string; avatar?: string; href?: string };
21  dateISO?: string;
22  dateLabel?: string;
23 
24  /** Visual tweaks */
25  className?: string;
26  imageClassName?: string;
27  panelClassName?: string;
28  titleClassName?: string;
29  excerptClassName?: string;
30  footerClassName?: string;
31 
32  /**
33   * Layout variant:
34   * - "attached": white panel slightly overlaps the image (screenshot look)
35   * - "flush": panel sits directly under the image with no offset
36   */
37  variant?: 'attached' | 'flush';
38};
39 
40export function BlogCardFour({
41  href,
42  image,
43  title,
44  excerpt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi necessitatibus repellat voluptatibus?',
45  author,
46  dateISO,
47  dateLabel,
48  className,
49  imageClassName,
50  panelClassName,
51  titleClassName,
52  excerptClassName,
53  footerClassName,
54  variant = 'attached',
55}: BlogCardFourProps) {
56  const Wrapper: any = href ? Link : 'article';
57  const wrapperProps = href
58    ? { href, 'aria-label': title }
59    : { role: 'article' };
60 
61  return (
62    <Wrapper
63      {...(wrapperProps as any)}
64      className={cn(
65        'group block w-full max-w-sm',
66        'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500',
67        className
68      )}
69    >
70      {/* Top cover image */}
71      <div className='relative'>
72        {/* eslint-disable-next-line @next/next/no-img-element */}
73        <img
74          src={image.src}
75          alt={image.alt ?? ''}
76          loading='lazy'
77          className={cn(
78            'h-44 w-full rounded-3xl object-cover',
79            'ring-1 ring-black/5 dark:ring-white/10',
80            imageClassName
81          )}
82        />
83      </div>
84 
85      {/* Info panel */}
86      <div
87        className={cn(
88          'relative -mt-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition-shadow dark:border-zinc-800 dark:bg-zinc-900',
89          variant === 'flush' && 'mt-2',
90          panelClassName
91        )}
92      >
93        <h3
94          className={cn(
95// … truncated