Blog Card Two

1'use client';
2 
3import * as React from 'react';
4import Link from 'next/link';
5import { Bookmark, Heart, Clock, Tag } from 'lucide-react';
6import { cn } from '@/lib/utils';
7 
8export type BlogCardTwoMeta = {
9  category?: string;
10  categoryHref?: string;
11  timeLabel?: string; // e.g. "48 min ago"
12};
13 
14export type BlogCardTwoProps = {
15  /** Card destination; if undefined, renders a plain <article>. */
16  href?: string;
17 
18  /** Background image */
19  image: { src: string; alt?: string };
20 
21  /** Title text (used for aria-label when href is present) */
22  title: string;
23 
24  /** Bottom meta row */
25  meta?: BlogCardTwoMeta;
26 
27  /** Action callbacks */
28  onLike?: () => void;
29  onBookmark?: () => void;
30 
31  /** Visual tuning */
32  rounded?: string; // e.g. "rounded-2xl"
33  overlayClassName?: string; // gradient overlay
34  titleClassName?: string;
35  metaClassName?: string;
36  actionClassName?: string;
37  className?: string;
38 
39  /** Overlay variants */
40  variant?: 'bottom-gradient' | 'center-fade';
41};
42 
43export function BlogCardTwo({
44  href,
45  image,
46  title,
47  meta,
48  onLike,
49  onBookmark,
50  rounded = 'rounded-2xl',
51  overlayClassName,
52  titleClassName,
53  metaClassName,
54  actionClassName,
55  className,
56  variant = 'bottom-gradient',
57}: BlogCardTwoProps) {
58  const Wrapper: any = href ? Link : 'article';
59  const wrapperProps = href
60    ? { href, 'aria-label': title }
61    : { role: 'article' };
62 
63  return (
64    <Wrapper
65      {...wrapperProps}
66      className={cn(
67        'group relative block overflow-hidden shadow-sm ring-1 ring-black/5 transition-shadow hover:shadow-md dark:ring-white/10',
68        rounded,
69        className
70      )}
71    >
72      {/* cover image (no rounding on the img itself; container controls rounding) */}
73      {/* eslint-disable-next-line @next/next/no-img-element */}
74      <img
75        src={image.src}
76        alt={image.alt ?? ''}
77        className='h-56 w-full object-cover sm:h-64 md:h-72'
78        loading='lazy'
79      />
80 
81      {/* overlay gradient */}
82      <div
83        className={cn(
84          'pointer-events-none absolute inset-0',
85          variant === 'bottom-gradient' &&
86            'bg-gradient-to-t from-black/70 via-black/30 to-transparent',
87          variant === 'center-fade' &&
88            'bg-[radial-gradient(100%_60%_at_50%_80%,rgba(0,0,0,0.55),transparent)]',
89          overlayClassName
90        )}
91      />
92 
93      {/* content row pinned to bottom */}
94      <div className='absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-4 sm:p-5'>
95// … truncated