| 1 | import type { ReactNode } from "react"; |
| 2 | |
| 3 | // A React component styled with Tailwind utility classes. |
| 4 | export function Card({ |
| 5 | title, |
| 6 | children, |
| 7 | className, |
| 8 | }: { |
| 9 | title: string; |
| 10 | children: ReactNode; |
| 11 | className?: string; |
| 12 | }) { |
| 13 | return ( |
| 14 | <div |
| 15 | className={`mt-6 rounded-xl border border-slate-200 bg-white p-6 shadow-sm ${className ?? "max-w-md"}`} |
| 16 | > |
| 17 | <h2 className="text-lg font-semibold">{title}</h2> |
| 18 | <div className="mt-2 text-slate-600">{children}</div> |
| 19 | </div> |
| 20 | ); |
| 21 | } |