cdcc04c8ff
* feat: extract PanelCard from ChartCard for reusability - Create base PanelCard and PanelCardItem components in UI package - Refactor ChartCard to use PanelCard as foundation while keeping legend functionality - Add headerActions prop to PanelCard for extensibility - Maintain backward compatibility for existing ChartCard usage - Export PanelCard and PanelCardItem from UI card components Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * chore: update yarn.lock after dependency resolution Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * refactor: rename prop from actions to headerContent - Rename 'actions' prop to 'headerContent' in PanelCard component - Update ChartCard to use new 'headerContent' prop name - More accurate naming since content can be text or other elements, not just buttons Co-Authored-By: eunjae@cal.com <hey@eunjae.dev> * clean up * revert yarn.lock * fix type error * type fix --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
import { Button } from "@calcom/ui/components/button";
|
|
|
|
export function PanelCard({
|
|
title,
|
|
subtitle,
|
|
cta,
|
|
headerContent,
|
|
children,
|
|
}: {
|
|
title: string | ReactNode;
|
|
subtitle?: string;
|
|
cta?: { label: string; onClick: () => void };
|
|
headerContent?: ReactNode;
|
|
children: ReactNode;
|
|
}) {
|
|
return (
|
|
<div className="bg-muted group relative flex w-full flex-col items-center rounded-2xl px-1 pb-1">
|
|
<div className="flex h-11 w-full shrink-0 items-center justify-between gap-2 px-4">
|
|
{typeof title === "string" ? (
|
|
<h2 className="text-emphasis mr-4 shrink-0 text-sm font-semibold">{title}</h2>
|
|
) : (
|
|
title
|
|
)}
|
|
<div className="no-scrollbar flex items-center gap-2 overflow-x-auto">
|
|
{headerContent}
|
|
{cta && (
|
|
<Button className="shrink-0" color="secondary" onClick={cta.onClick}>
|
|
{cta.label}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="bg-default border-muted w-full grow gap-3 rounded-xl border">
|
|
{subtitle && (
|
|
<h3 className="text-subtle border-muted border-b p-3 text-sm font-medium leading-none">
|
|
{subtitle}
|
|
</h3>
|
|
)}
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|