import * as React from "react" import { cn } from "@/lib/utils" import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" export interface ChartCardProps { /** Card heading. */ title: string /** Optional supporting text below the title. */ description?: string /** Actions slot rendered to the right of the title — e.g. a time-range select. */ actions?: React.ReactNode /** * Chart content rendered inside the card body. * Drop in any charting library output (Recharts, Chart.js, etc.). */ children: React.ReactNode /** Optional legend or summary rendered below the chart. */ footer?: React.ReactNode className?: string } /** * Slot-based card wrapper for charts and data visualizations. * Renders a titled card with a content area for any charting library * and optional action controls and footer legend. * * @example * ```tsx * …} * footer={Updated 5m ago} * > * * * ``` */ export function ChartCard({ title, description, actions, children, footer, className, }: ChartCardProps) { return (

{title} {description && {description}}

{actions &&

{actions}

} {children} {footer && (

{footer}

)} ) }

Prop	Type	Required	Description
`title`	`string`	yes	Card heading.
`description`	`string`	—	Supporting text below the title.
`children`	`ReactNode`	yes	Chart content.