{
  "name": "blog-card-two",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "blog-card-two.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { Bookmark, Heart, Clock, Tag } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport type BlogCardTwoMeta = {\n  category?: string;\n  categoryHref?: string;\n  timeLabel?: string; // e.g. \"48 min ago\"\n};\n\nexport type BlogCardTwoProps = {\n  /** Card destination; if undefined, renders a plain <article>. */\n  href?: string;\n\n  /** Background image */\n  image: { src: string; alt?: string };\n\n  /** Title text (used for aria-label when href is present) */\n  title: string;\n\n  /** Bottom meta row */\n  meta?: BlogCardTwoMeta;\n\n  /** Action callbacks */\n  onLike?: () => void;\n  onBookmark?: () => void;\n\n  /** Visual tuning */\n  rounded?: string; // e.g. \"rounded-2xl\"\n  overlayClassName?: string; // gradient overlay\n  titleClassName?: string;\n  metaClassName?: string;\n  actionClassName?: string;\n  className?: string;\n\n  /** Overlay variants */\n  variant?: 'bottom-gradient' | 'center-fade';\n};\n\nexport function BlogCardTwo({\n  href,\n  image,\n  title,\n  meta,\n  onLike,\n  onBookmark,\n  rounded = 'rounded-2xl',\n  overlayClassName,\n  titleClassName,\n  metaClassName,\n  actionClassName,\n  className,\n  variant = 'bottom-gradient',\n}: BlogCardTwoProps) {\n  const Wrapper: any = href ? Link : 'article';\n  const wrapperProps = href\n    ? { href, 'aria-label': title }\n    : { role: 'article' };\n\n  return (\n    <Wrapper\n      {...wrapperProps}\n      className={cn(\n        'group relative block overflow-hidden shadow-sm ring-1 ring-black/5 transition-shadow hover:shadow-md dark:ring-white/10',\n        rounded,\n        className\n      )}\n    >\n      {/* cover image (no rounding on the img itself; container controls rounding) */}\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      <img\n        src={image.src}\n        alt={image.alt ?? ''}\n        className='h-56 w-full object-cover sm:h-64 md:h-72'\n        loading='lazy'\n      />\n\n      {/* overlay gradient */}\n      <div\n        className={cn(\n          'pointer-events-none absolute inset-0',\n          variant === 'bottom-gradient' &&\n            'bg-gradient-to-t from-black/70 via-black/30 to-transparent',\n          variant === 'center-fade' &&\n            'bg-[radial-gradient(100%_60%_at_50%_80%,rgba(0,0,0,0.55),transparent)]',\n          overlayClassName\n        )}\n      />\n\n      {/* content row pinned to bottom */}\n      <div className='absolute inset-x-0 bottom-0 flex items-end justify-between gap-3 p-4 sm:p-5'>\n        <div className='min-w-0'>\n          <h3\n            className={cn(\n              'line-clamp-2 text-lg font-semibold tracking-tight text-white drop-shadow-sm sm:text-xl',\n              'group-hover:underline',\n              titleClassName\n            )}\n          >\n            {title}\n          </h3>\n\n          {(meta?.category || meta?.timeLabel) && (\n            <div\n              className={cn(\n                'mt-2 flex flex-wrap items-center gap-3 text-sm text-zinc-200/95',\n                metaClassName\n              )}\n            >\n              {meta?.category && (\n                <MetaPill\n                  href={meta.categoryHref}\n                  icon={<Tag className='h-3.5 w-3.5' aria-hidden />}\n                >\n                  {meta.category}\n                </MetaPill>\n              )}\n              {meta?.timeLabel && (\n                <span className='inline-flex items-center gap-2'>\n                  <Clock className='h-3.5 w-3.5' aria-hidden />\n                  {meta.timeLabel}\n                </span>\n              )}\n            </div>\n          )}\n        </div>\n\n        {/* actions */}\n        <div\n          className={cn(\n            'flex shrink-0 items-center gap-2 text-white/90',\n            actionClassName\n          )}\n        >\n          <button\n            type='button'\n            aria-label='Like'\n            onClick={(e) => {\n              e.preventDefault();\n              onLike?.();\n            }}\n            className='rounded-full bg-black/25 p-2 backdrop-blur hover:bg-black/35'\n          >\n            <Heart className='h-4 w-4' aria-hidden />\n          </button>\n          <button\n            type='button'\n            aria-label='Bookmark'\n            onClick={(e) => {\n              e.preventDefault();\n              onBookmark?.();\n            }}\n            className='rounded-full bg-black/25 p-2 backdrop-blur hover:bg-black/35'\n          >\n            <Bookmark className='h-4 w-4' aria-hidden />\n          </button>\n        </div>\n      </div>\n    </Wrapper>\n  );\n}\n\nfunction MetaPill({\n  href,\n  icon,\n  children,\n}: React.PropsWithChildren<{ href?: string; icon?: React.ReactNode }>) {\n  const Comp: any = href ? Link : 'span';\n  const props = href ? { href } : { role: 'text' };\n  return (\n    <Comp className='inline-flex items-center gap-2 text-white/95' {...props}>\n      {icon}\n      <span className='font-medium'>{children}</span>\n      <span className='mx-2 opacity-60 select-none'>|</span>\n    </Comp>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}