Compact Card

# Integrate this UI component

Add this component to my project.

1. Install any missing dependencies.
2. Make sure Tailwind CSS is set up and scans the new file.
3. Prefer passing props over editing the component source — changing the component itself may break it.
4. Adjust colors, size, and layout via props or wrapper classes to match my project. You know my codebase better than this snippet does.

## Component source

```tsx
type CompactCardProps = {
  image?: string;
  imageAlt?: string;
  eyebrow?: string;
  title?: string;
  description?: string;
  author?: string;
  readTime?: string;
  href?: string;
  className?: string;
};

export default function CompactCard({
  image = 'https://assets.uniquel.io/components/stock/photo-1497366754035-f200968a6e72.jpg',
  imageAlt = 'Sunlit creative studio',
  eyebrow = 'Workspace',
  title = 'Designing for the quiet moments',
  description = 'Small details that make a working space feel calm, focused, and ready for the next idea.',
  author = 'Maya Chen',
  readTime = '6 min read',
  href,
  className = '',
}: CompactCardProps) {
  const content = (
    <article
      className={[
        'group h-auto w-full max-w-sm overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-lg',
        className,
      ]
        .filter(Boolean)
        .join(' ')}
    >
      <img
        src={image}
        alt={imageAlt}
        className='aspect-[16/10] w-full object-cover transition-transform duration-500 group-hover:scale-105'
      />
      <div className='p-5'>
        <p className='text-xs font-semibold uppercase tracking-[0.16em] text-indigo-600'>
          {eyebrow}
        </p>
        <h3 className='mt-2 text-lg font-semibold tracking-tight text-gray-900'>{title}</h3>
        <p className='mt-2 text-sm leading-6 text-gray-600'>{description}</p>
        <div className='mt-5 flex items-center justify-between border-t border-gray-100 pt-4 text-xs text-gray-500'>
          <span className='font-medium text-gray-700'>{author}</span>
          <span>{readTime}</span>
        </div>
      </div>
    </article>
  );

  return href ? (
    <a href={href} className='block focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2'>
      {content}
    </a>
  ) : (
    content
  );
}

```