{
  "name": "blog-card-four",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "blog-card-four.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { CalendarDays } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport type BlogCardFourProps = {\n  /** Entire card link; if omitted renders as plain <article>. */\n  href?: string;\n\n  /** Cover image (top, rounded). */\n  image: { src: string; alt?: string };\n\n  /** Title and short description. */\n  title: string;\n  excerpt?: string;\n\n  /** Footer meta. */\n  author?: { name: string; avatar?: string; href?: string };\n  dateISO?: string;\n  dateLabel?: string;\n\n  /** Visual tweaks */\n  className?: string;\n  imageClassName?: string;\n  panelClassName?: string;\n  titleClassName?: string;\n  excerptClassName?: string;\n  footerClassName?: string;\n\n  /**\n   * Layout variant:\n   * - \"attached\": white panel slightly overlaps the image (screenshot look)\n   * - \"flush\": panel sits directly under the image with no offset\n   */\n  variant?: 'attached' | 'flush';\n};\n\nexport function BlogCardFour({\n  href,\n  image,\n  title,\n  excerpt = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi necessitatibus repellat voluptatibus?',\n  author,\n  dateISO,\n  dateLabel,\n  className,\n  imageClassName,\n  panelClassName,\n  titleClassName,\n  excerptClassName,\n  footerClassName,\n  variant = 'attached',\n}: BlogCardFourProps) {\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 as any)}\n      className={cn(\n        'group block w-full max-w-sm',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500',\n        className\n      )}\n    >\n      {/* Top cover image */}\n      <div className='relative'>\n        {/* eslint-disable-next-line @next/next/no-img-element */}\n        <img\n          src={image.src}\n          alt={image.alt ?? ''}\n          loading='lazy'\n          className={cn(\n            'h-44 w-full rounded-3xl object-cover',\n            'ring-1 ring-black/5 dark:ring-white/10',\n            imageClassName\n          )}\n        />\n      </div>\n\n      {/* Info panel */}\n      <div\n        className={cn(\n          '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',\n          variant === 'flush' && 'mt-2',\n          panelClassName\n        )}\n      >\n        <h3\n          className={cn(\n            'mb-2 text-[17px] leading-snug font-semibold text-zinc-900 dark:text-zinc-50',\n            'group-hover:underline',\n            titleClassName\n          )}\n        >\n          {title}\n        </h3>\n\n        {excerpt && (\n          <p\n            className={cn(\n              'mb-4 text-sm text-zinc-600 dark:text-zinc-400',\n              excerptClassName\n            )}\n          >\n            {excerpt}\n          </p>\n        )}\n\n        <div\n          className={cn('flex items-center justify-between', footerClassName)}\n        >\n          {/* author */}\n          {author && (\n            <div className='inline-flex items-center gap-2'>\n              {author.avatar ? (\n                // eslint-disable-next-line @next/next/no-img-element\n                <img\n                  src={author.avatar}\n                  alt=''\n                  className='h-6 w-6 rounded-full ring-1 ring-white dark:ring-zinc-900'\n                  loading='lazy'\n                />\n              ) : (\n                <div className='h-6 w-6 rounded-full bg-zinc-200 dark:bg-zinc-700' />\n              )}\n              {author.href ? (\n                <a\n                  href={author.href}\n                  onClick={(e) => e.stopPropagation()}\n                  className='text-sm font-medium text-zinc-700 hover:underline dark:text-zinc-300'\n                >\n                  {author.name}\n                </a>\n              ) : (\n                <span className='text-sm font-medium text-zinc-700 dark:text-zinc-300'>\n                  {author.name}\n                </span>\n              )}\n            </div>\n          )}\n\n          {(dateLabel || dateISO) && (\n            <time\n              dateTime={dateISO}\n              className='inline-flex items-center gap-2 text-sm text-zinc-500 dark:text-zinc-400'\n            >\n              <CalendarDays className='h-4 w-4' aria-hidden />\n              {dateLabel}\n            </time>\n          )}\n        </div>\n      </div>\n    </Wrapper>\n  );\n}\n\n/** Convenient preset matching the screenshot look */\nexport function OverlappedBlogCard(props: Omit<BlogCardFourProps, 'variant'>) {\n  return <BlogCardFour {...props} variant='attached' />;\n}\n",
      "type": "registry:ui"
    }
  ]
}