refactor: extract PanelCard from ChartCard for reusability (#23360)

* 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>

packages/features/insights/components/ChartCard.tsx

@@ -3,7 +3,7 @@
 import { Fragment, type ReactNode } from "react";
 
 import classNames from "@calcom/ui/classNames";
-import { Button } from "@calcom/ui/components/button";
+import { PanelCard } from "@calcom/ui/components/card";
 import { Tooltip } from "@calcom/ui/components/tooltip";
 
 type LegendItem = {
@@ -21,39 +21,19 @@ export function ChartCard({
   legendSize,
   children,
 }: {
-  title: string | React.ReactNode;
+  title: string | ReactNode;
   subtitle?: string;
   cta?: { label: string; onClick: () => void };
   legend?: Array<LegendItem>;
   legendSize?: LegendSize;
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
+  const legendComponent = legend && legend.length > 0 ? <Legend items={legend} size={legendSize} /> : null;
+
   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">
-          {legend && legend.length > 0 && <Legend items={legend} size={legendSize} />}
-          {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>
+    <PanelCard title={title} subtitle={subtitle} cta={cta} headerContent={legendComponent}>
+      {children}
+    </PanelCard>
   );
 }
 

packages/ui/components/card/PanelCard.tsx

@@ -0,0 +1,45 @@
+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>
+  );
+}

packages/ui/components/card/index.ts

@@ -2,3 +2,4 @@ export { default as Card } from "./Card";
 export type { BaseCardProps } from "./Card";
 export { StepCard } from "./StepCard";
 export { default as FormCard } from "./FormCard";
+export { PanelCard } from "./PanelCard";