Card

<Card>
  <CardHeader>Spring collection</CardHeader>
  <CardBody>Ceramics inspired by wabi-sabi.</CardBody>
</Card>

import { cn } from '@/lib/utils'

interface CardProps {
  className?: string
  children:   React.ReactNode
}

interface CardSectionProps {
  className?: string
  children:   React.ReactNode
}

export function Card({ className, children }: CardProps): React.JSX.Element {
  return (
    <div className={cn('haiku-card', className)}>
      {children}
    </div>
  )
}

export function CardHeader({ className, children }: CardSectionProps): React.JSX.Element {
  return (
    <div className={cn('haiku-card-header', className)}>
      {children}
    </div>
  )
}

export function CardBody({ className, children }: CardSectionProps): React.JSX.Element {
  return (
    <div className={cn('haiku-card-body', className)}>
      {children}
    </div>
  )
}

export function CardFooter({ className, children }: CardSectionProps): React.JSX.Element {
  return (
    <div className={cn('haiku-card-footer', className)}>
      {children}
    </div>
  )
}