Card

<Card><CardHeader>Overview</CardHeader><CardBody>Content here</CardBody></Card>

import type * as React from 'react'
import { cn } from '@/lib/utils'

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

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

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

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

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

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