explorer-monorepo/frontend/libs/frontend-ui-primitives/Card.tsx

import { ReactNode } from 'react'
import clsx from 'clsx'

interface CardProps {
  children: ReactNode
  className?: string
  title?: string
}

export function Card({ children, className, title }: CardProps) {
  return (
    <div
      className={clsx(
        'rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900/70 sm:p-5',
        className
      )}
    >
      {title && (
        <h3 className="mb-3 text-base font-semibold text-gray-900 dark:text-white sm:text-lg">
          {title}
        </h3>
      )}
      {children}
    </div>
  )
}