98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import { Button } from '@/components/ui/button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type ControlButtonVariant = 'primary' | 'ghost' | 'secondary' | 'danger';
|
|
|
|
export type FinancialControlOption = {
|
|
value: string;
|
|
label: string;
|
|
disabled?: boolean;
|
|
};
|
|
|
|
export type FinancialControlSection = {
|
|
id: string;
|
|
label: string;
|
|
value: string;
|
|
options: FinancialControlOption[];
|
|
onChange: (value: string) => void;
|
|
};
|
|
|
|
export type FinancialControlAction = {
|
|
id: string;
|
|
label: string;
|
|
onClick: () => void;
|
|
disabled?: boolean;
|
|
variant?: ControlButtonVariant;
|
|
};
|
|
|
|
type FinancialControlBarProps = {
|
|
title?: string;
|
|
subtitle?: string;
|
|
sections: FinancialControlSection[];
|
|
actions?: FinancialControlAction[];
|
|
className?: string;
|
|
};
|
|
|
|
export function FinancialControlBar({
|
|
title = 'Control Bar',
|
|
subtitle,
|
|
sections,
|
|
actions,
|
|
className
|
|
}: FinancialControlBarProps) {
|
|
return (
|
|
<section className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-3', className)}>
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<div className="min-w-0">
|
|
<h3 className="text-sm font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
|
|
{subtitle ? (
|
|
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{subtitle}</p>
|
|
) : null}
|
|
</div>
|
|
|
|
{actions && actions.length > 0 ? (
|
|
<div className="grid w-full grid-cols-1 gap-2 sm:flex sm:w-auto sm:flex-wrap sm:items-center sm:justify-end">
|
|
{actions.map((action) => (
|
|
<Button
|
|
key={action.id}
|
|
type="button"
|
|
variant={action.variant ?? 'secondary'}
|
|
disabled={action.disabled}
|
|
className="px-2 py-1 text-xs sm:min-h-9"
|
|
onClick={action.onClick}
|
|
>
|
|
{action.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
|
|
<div className="mt-3 grid grid-cols-1 gap-2">
|
|
{sections.map((section) => (
|
|
<div
|
|
key={section.id}
|
|
className="rounded-lg border border-[color:var(--line-weak)] bg-[color:var(--panel-soft)] px-3 py-2"
|
|
>
|
|
<span className="mb-2 block text-[10px] uppercase tracking-[0.16em] text-[color:var(--terminal-muted)]">{section.label}</span>
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
|
{section.options.map((option) => (
|
|
<Button
|
|
key={`${section.id}-${option.value}`}
|
|
type="button"
|
|
variant={option.value === section.value ? 'primary' : 'ghost'}
|
|
disabled={option.disabled}
|
|
className="px-2 py-1 text-xs sm:min-h-9"
|
|
onClick={() => section.onChange(option.value)}
|
|
>
|
|
{option.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|