{
  "name": "blog-card-one",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "blog-card-one.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { Bookmark, MoreVertical } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport type BlogCardOneAuthor = {\n  name: string;\n  avatar?: string; // URL\n  href?: string;\n};\n\nexport type BlogCardOneProps = {\n  /** Main link target for the whole card */\n  href?: string;\n  /** Category tag (clickable) */\n  category?: { label: string; href?: string };\n  /** Title (required for a11y, used as aria-label on the card) */\n  title: string;\n  /** Short summary */\n  excerpt?: string;\n  /** Image (decorative if alt is empty) */\n  image?: { src: string; alt?: string };\n  /** Author & date */\n  author?: BlogCardOneAuthor;\n  dateISO?: string; // e.g. \"2024-08-15\"\n  dateLabel?: string; // e.g. \"Aug 15, 2024\"\n\n  /** Buttons (bookmark/menu) visibility */\n  showActions?: boolean;\n  /** Called when bookmark clicked */\n  onBookmark?: () => void;\n  /** Called when menu clicked */\n  onMenu?: (e: React.MouseEvent<HTMLButtonElement>) => void;\n\n  /** Style variant */\n  variant?: 'image-left' | 'image-top';\n\n  /** Slot overrides */\n  className?: string; // outer card\n  imageClassName?: string;\n  bodyClassName?: string;\n  titleClassName?: string;\n  excerptClassName?: string;\n  tagClassName?: string;\n};\n\nexport function BlogCardOne({\n  href,\n  category,\n  title,\n  excerpt,\n  image,\n  author,\n  dateISO,\n  dateLabel,\n  showActions = true,\n  onBookmark,\n  onMenu,\n  variant = 'image-left',\n  className,\n  imageClassName,\n  bodyClassName,\n  titleClassName,\n  excerptClassName,\n  tagClassName,\n}: BlogCardOneProps) {\n  const Wrapper: React.ElementType = href ? Link : 'article';\n  const wrapperProps = href\n    ? { href, 'aria-label': title }\n    : { role: 'article' };\n\n  const Figure = (\n    <figure\n      className={cn(\n        'relative shrink-0 overflow-hidden rounded-l-xl sm:rounded-xl',\n        variant === 'image-left' ? 'h-44 w-44 sm:h-40 sm:w-56' : 'h-48 w-full',\n        imageClassName\n      )}\n    >\n      {image?.src ? (\n        // eslint-disable-next-line @next/next/no-img-element\n        <img\n          src={image.src}\n          alt={image.alt ?? ''}\n          className='h-full w-full object-cover'\n          loading='lazy'\n        />\n      ) : (\n        <div className='grid h-full w-full place-items-center bg-zinc-100 text-zinc-400 dark:bg-zinc-800'>\n          <span className='text-xs'>No image</span>\n        </div>\n      )}\n    </figure>\n  );\n\n  return (\n    <Wrapper\n      {...(wrapperProps as any)}\n      className={cn(\n        'group block rounded-xl bg-white ring-1 ring-zinc-200 transition-shadow hover:shadow-md dark:bg-zinc-900 dark:ring-zinc-800',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500',\n        variant === 'image-left' ? 'p-2 sm:p-3' : 'p-2 sm:p-3',\n        className\n      )}\n    >\n      <div\n        className={cn(\n          variant === 'image-left'\n            ? 'flex gap-4 sm:gap-5'\n            : 'flex flex-col gap-3 sm:gap-4'\n        )}\n      >\n        {/* image */}\n        {Figure}\n\n        {/* content */}\n        <div className={cn('flex min-w-0 flex-1 flex-col', bodyClassName)}>\n          {/* top row: tag + actions */}\n          <div className='flex items-start justify-between gap-2'>\n            {category?.label && (\n              <CategoryTag href={category.href} className={tagClassName}>\n                {category.label}\n              </CategoryTag>\n            )}\n            {showActions && (\n              <div className='flex items-center gap-1'>\n                <button\n                  type='button'\n                  aria-label='Bookmark'\n                  onClick={(e) => {\n                    e.preventDefault();\n                    onBookmark?.();\n                  }}\n                  className='rounded-md p-1.5 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'\n                >\n                  <Bookmark className='h-4 w-4' aria-hidden />\n                </button>\n                <button\n                  type='button'\n                  aria-label='More options'\n                  onClick={(e) => {\n                    e.preventDefault();\n                    onMenu?.(e);\n                  }}\n                  className='rounded-md p-1.5 text-zinc-500 hover:bg-zinc-100 hover:text-zinc-800 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'\n                >\n                  <MoreVertical className='h-4 w-4' aria-hidden />\n                </button>\n              </div>\n            )}\n          </div>\n\n          {/* title */}\n          <h3\n            className={cn(\n              'mt-1 line-clamp-2 text-xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50',\n              'group-hover:underline',\n              titleClassName\n            )}\n          >\n            {title}\n          </h3>\n\n          {/* excerpt */}\n          {excerpt && (\n            <p\n              className={cn(\n                'mt-1.5 line-clamp-2 text-sm text-zinc-600 dark:text-zinc-300',\n                excerptClassName\n              )}\n            >\n              {excerpt}\n            </p>\n          )}\n\n          {/* meta */}\n          {(author?.name || dateLabel) && (\n            <div className='mt-3 flex items-center gap-3 text-sm text-zinc-600 dark:text-zinc-300'>\n              {author?.name && (\n                <span 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 object-cover ring-1 ring-white dark:ring-zinc-900'\n                      loading='lazy'\n                    />\n                  )}\n                  {author.href ? (\n                    <Link\n                      href={author.href}\n                      onClick={(e) => e.stopPropagation()}\n                      className='font-medium hover:underline'\n                    >\n                      {author.name}\n                    </Link>\n                  ) : (\n                    <span className='font-medium'>{author.name}</span>\n                  )}\n                </span>\n              )}\n              {dateLabel && (\n                <>\n                  <span className='text-zinc-400 select-none'>|</span>\n                  <time dateTime={dateISO}>{dateLabel}</time>\n                </>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </Wrapper>\n  );\n}\n\n/* ---------- helpers / subcomponents ---------- */\n\nfunction CategoryTag({\n  href,\n  className,\n  children,\n}: React.PropsWithChildren<{ href?: string; className?: string }>) {\n  const TagComp: any = href ? Link : 'span';\n  const props = href ? { href } : { role: 'text' };\n  return (\n    <TagComp\n      {...props}\n      className={cn(\n        'inline-flex items-center rounded-md border border-indigo-200 bg-indigo-50 px-2 py-1 text-xs font-semibold text-indigo-700',\n        'dark:border-indigo-900/50 dark:bg-indigo-950/40 dark:text-indigo-300',\n        className\n      )}\n    >\n      {children}\n    </TagComp>\n  );\n}\n\n/* ---------- Variant export with preset ---------- */\n\n/** A preset that mirrors the screenshot: image on the left. */\nexport function ModernBlogCard(props: Omit<BlogCardOneProps, 'variant'>) {\n  return <BlogCardOne variant='image-left' {...props} />;\n}\n\n/** Compact variant with the image stacked on top (great for grids). */\nexport function CompactBlogCard(props: Omit<BlogCardOneProps, 'variant'>) {\n  return <BlogCardOne variant='image-top' {...props} />;\n}\n",
      "type": "registry:ui"
    }
  ]
}