Members Growth Chart

1"use client";
2import { useState } from "react";
3import {
4  Area,
5  AreaChart,
6  ResponsiveContainer,
7  Tooltip,
8  TooltipContentProps,
9  XAxis,
10} from "recharts";
11import { motion } from "motion/react";
12import { cn } from "@/lib/utils";
13import { MembersGrowthData, TabKey } from "./members-growth-chart-data";
14import { useId } from "react";
15
16type MembersGrowthChartProps = {
17  data: Record<TabKey, MembersGrowthData[]>;
18  date?: string;
19  greeting?: string;
20  avatar: string;
21};
22
23export const MembersGrowthChart = ({
24  data,
25  date = "March 23, 2026",
26  greeting = "Good Morning",
27  avatar,
28}: MembersGrowthChartProps) => {
29  const tabs = Object.keys(data) as TabKey[];
30  const [active, setActive] = useState<TabKey>(tabs[0]);
31
32  const currentData = data[active];
33  const totalMembers = currentData.reduce((sum, item) => sum + item.members, 0);
34
35  const layoutScope = useId();
36
37  return (
38    <div className="w-90  rounded-4xl bg-linear-to-b from-neutral-100 to-neutral-300 relative p-6 shadow-xs">
39      <div className="flex flex-col gap-5">
40        <ChartHeader date={date} greeting={greeting} avatar={avatar} />
41        <div className="rounded-xl bg-linear-to-b from-white via-neutral-200 to-transparent p-[1.5px]">
42          <div className="rounded-xl bg-linear-to-b from-neutral-100 to-neutral-300 p-3 shadow-[inset_0_1px_5px_rgba(0,0,0,0.06),inset_0_-6px_12px_rgba(255,255,255,0.55)] flex flex-col gap-2.5">
43            <MembersTab
44              tabs={tabs}
45              active={active}
46              setActive={setActive}
47              totalMembers={totalMembers}
48              layoutScope={layoutScope}
49            />
50            <CardText />
51            <div className="w-full h-20">
52              <ResponsiveContainer width="100%" height="100%">
53                <AreaChart data={currentData} margin={{ left: 12, right: 12 }}>
54                  <Area
55                    type="monotone"
56                    dataKey="members"
57                    stroke="url(#membersStrokeGradient)"
58                    fill="url(#membersFillGradient)"
59                    strokeWidth={2}
60                    strokeLinecap="round"
61                    strokeLinejoin="round"
62                    activeDot={{
63                      r: 4,
64                      fill: "url(#membersDotGradient)",
65                      stroke: "#ffffff",
66                      strokeWidth: 2,
67                    }}
68                  />
69                  <XAxis
70// … truncated