Jean-Luc Makiola
e1411976dd
- WizardStepper: horizontal 1-2-3 stepper with clickable completed steps - IncomeStep: number input with currency suffix and validation - AllocationBar: sticky remaining balance with live polite announcements - CategoryGroupHeader: colored dot section divider per category type - PresetItemRow: checkbox + name + badge + editable amount input - RecurringItemsStep: groups 19 PRESETS by type with allocation calculation - SetupPage: page orchestrator with step navigation and state persistence
37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import type { CategoryType } from "@/lib/types"
|
|
import { Separator } from "@/components/ui/separator"
|
|
|
|
interface CategoryGroupHeaderProps {
|
|
type: CategoryType
|
|
label: string
|
|
count: number
|
|
}
|
|
|
|
const colorVar = (type: CategoryType): string => {
|
|
const map: Record<CategoryType, string> = {
|
|
income: "var(--color-income)",
|
|
bill: "var(--color-bill)",
|
|
variable_expense: "var(--color-variable-expense)",
|
|
debt: "var(--color-debt)",
|
|
saving: "var(--color-saving)",
|
|
investment: "var(--color-investment)",
|
|
}
|
|
return map[type]
|
|
}
|
|
|
|
export function CategoryGroupHeader({ type, label, count }: CategoryGroupHeaderProps) {
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-2 pt-4 pb-2">
|
|
<span
|
|
className="w-2.5 h-2.5 rounded-full"
|
|
style={{ backgroundColor: colorVar(type) }}
|
|
/>
|
|
<span className="text-sm font-semibold">{label}</span>
|
|
<span className="text-xs text-muted-foreground">({count} items)</span>
|
|
</div>
|
|
<Separator />
|
|
</div>
|
|
)
|
|
}
|