セグメントゲージカードSegmentedGaugeCardExperimental

import { SegmentedGaugeCard } from "@gunjo/ui";

const segments = [
    { label: "基礎費", value: 35, rangeLabel: "固定費" },
    { label: "成長投資", value: 45, rangeLabel: "追加投資" },
    { label: "運用費", value: 20, rangeLabel: "運用余力" },
];

export function SpendBreakdownGaugeVariants() {
    return (
        <div className="grid gap-6">
            <SegmentedGaugeCard
              segments={segments}
              value={82}
              targetValue={90}
              max={100}
            />
            <SegmentedGaugeCard segments={segments} selectedIndex={1} />
            <SegmentedGaugeCard
              segments={segments}
              variant="compact"
              showLegend={false}
            />
        </div>
    );
}