suphicakir
191c3e6db5
- Günlük / Haftalık / Aylık sekmeli iki çizgi grafik (Recharts, ayrı parça olarak yüklenir) - Kümülatif harcanabilir vs gerçekleşen; 4 grup (+ isteğe bağlı harcanabilir çizgisi) - Dönem istatistiklerine grup kırılımı (spent_by_group) - Grafik altında metin özeti, koyu tema uyumlu renkler Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
35 lines
914 B
TypeScript
35 lines
914 B
TypeScript
import { cn } from '@/lib/utils'
|
||
|
||
/** Tek seçimlik düğme grubu (ör. Haftalık / Aylık). Her düğme ≥ 44 px yüksek. */
|
||
export function Segmented<T extends string>({
|
||
label,
|
||
value,
|
||
options,
|
||
onChange,
|
||
}: {
|
||
/** Ekran okuyucu için grup adı */
|
||
label: string
|
||
value: T
|
||
options: readonly { value: T; label: string }[]
|
||
onChange: (value: T) => void
|
||
}) {
|
||
return (
|
||
<div role="group" aria-label={label} className="flex rounded-lg border p-0.5">
|
||
{options.map((o) => (
|
||
<button
|
||
key={o.value}
|
||
type="button"
|
||
aria-pressed={value === o.value}
|
||
onClick={() => onChange(o.value)}
|
||
className={cn(
|
||
'min-h-11 rounded-md px-3 text-sm font-medium sm:px-4',
|
||
value === o.value ? 'bg-primary text-primary-foreground' : 'hover:bg-muted',
|
||
)}
|
||
>
|
||
{o.label}
|
||
</button>
|
||
))}
|
||
</div>
|
||
)
|
||
}
|