Card

<Card>
  <CardHeader>Seasonal menu</CardHeader>
  <CardBody>Spring tasting flight, five courses.</CardBody>
</Card>

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

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

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

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

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

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