{
  "name": "blog-card-three",
  "type": "registry:ui",
  "registryDependencies": [],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "tailwind": {},
  "cssVars": {
    "light": {},
    "dark": {}
  },
  "files": [
    {
      "path": "blog-card-three.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport Link from 'next/link';\nimport { ThumbsUp, Bookmark } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport type BlogCardThreeMeta = {\n  author?: { name: string; avatar?: string; href?: string };\n  readLabel?: string; // \"2 min read\"\n};\n\nexport type BlogCardThreeProps = {\n  /** Whole card link */\n  href?: string;\n\n  /** Title */\n  title: string;\n\n  /** Small square thumbnail */\n  thumb?: { src: string; alt?: string };\n\n  /** Meta row */\n  meta?: BlogCardThreeMeta;\n\n  /** Actions */\n  onLike?: () => void;\n  onBookmark?: () => void;\n\n  /** Layout */\n  variant?: 'thumb-right' | 'thumb-left';\n\n  /** Slot overrides */\n  className?: string;\n  titleClassName?: string;\n  thumbClassName?: string;\n  metaClassName?: string;\n  actionsClassName?: string;\n};\n\nexport function BlogCardThree({\n  href,\n  title,\n  thumb,\n  meta,\n  onLike,\n  onBookmark,\n  variant = 'thumb-right',\n  className,\n  titleClassName,\n  thumbClassName,\n  metaClassName,\n  actionsClassName,\n}: BlogCardThreeProps) {\n  const Wrapper: any = href ? Link : 'article';\n  const wrapperProps = href\n    ? { href, 'aria-label': title }\n    : { role: 'article' };\n\n  const Thumb = (\n    <div\n      className={cn(\n        'relative h-20 w-20 shrink-0 overflow-hidden rounded-xl ring-1 ring-black/5 dark:ring-white/10',\n        thumbClassName\n      )}\n    >\n      {/* eslint-disable-next-line @next/next/no-img-element */}\n      {thumb?.src ? (\n        <img\n          src={thumb.src}\n          alt={thumb.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-xs text-zinc-400 dark:bg-zinc-800'>\n          no image\n        </div>\n      )}\n    </div>\n  );\n\n  return (\n    <Wrapper\n      {...(wrapperProps as any)}\n      className={cn(\n        'group flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md dark:border-zinc-800 dark:bg-zinc-900',\n        'focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500',\n        className\n      )}\n    >\n      {/* optional left thumb */}\n      {variant === 'thumb-left' && Thumb}\n\n      <div className='flex min-w-0 flex-1 flex-col gap-6'>\n        {/* title */}\n        <h3\n          className={cn(\n            'line-clamp-2 text-[17px] leading-snug font-semibold text-zinc-900 group-hover:underline dark:text-zinc-50',\n            titleClassName\n          )}\n        >\n          {title}\n        </h3>\n\n        {/* bottom row */}\n        <div className='flex items-center justify-between'>\n          {/* meta */}\n          <div className={cn('flex items-center gap-3', metaClassName)}>\n            {meta?.author && (\n              <span className='inline-flex items-center gap-2 text-sm text-zinc-700 dark:text-zinc-300'>\n                {meta.author.avatar && (\n                  // eslint-disable-next-line @next/next/no-img-element\n                  <img\n                    src={meta.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                {meta.author.href ? (\n                  <a\n                    href={meta.author.href}\n                    onClick={(e) => e.stopPropagation()}\n                    className='font-medium hover:underline'\n                  >\n                    {meta.author.name}\n                  </a>\n                ) : (\n                  <span className='font-medium'>{meta.author.name}</span>\n                )}\n              </span>\n            )}\n\n            {meta?.readLabel && (\n              <span className='text-sm text-zinc-500 dark:text-zinc-400'>\n                {meta.readLabel}\n              </span>\n            )}\n          </div>\n\n          {/* actions */}\n          <div\n            className={cn(\n              'flex items-center gap-2 text-zinc-500 dark:text-zinc-400',\n              actionsClassName\n            )}\n          >\n            <button\n              type='button'\n              aria-label='Like'\n              onClick={(e) => {\n                e.preventDefault();\n                onLike?.();\n              }}\n              className='rounded-md p-1.5 hover:bg-zinc-100 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'\n            >\n              <ThumbsUp 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-md p-1.5 hover:bg-zinc-100 hover:text-zinc-800 dark:hover:bg-zinc-800 dark:hover:text-zinc-100'\n            >\n              <Bookmark className='h-4 w-4' aria-hidden />\n            </button>\n          </div>\n        </div>\n      </div>\n\n      {/* default: right thumb */}\n      {variant === 'thumb-right' && Thumb}\n    </Wrapper>\n  );\n}\n\n/** Presets for convenience */\nexport function MinimalBlogCardRight(\n  props: Omit<BlogCardThreeProps, 'variant'>\n) {\n  return <BlogCardThree {...props} variant='thumb-right' />;\n}\nexport function MinimalBlogCardLeft(\n  props: Omit<BlogCardThreeProps, 'variant'>\n) {\n  return <BlogCardThree {...props} variant='thumb-left' />;\n}\n",
      "type": "registry:ui"
    }
  ]
}