Francy51/Neon-Desk
2
0
Fork 0
Code Issues 22 Pull Requests Actions Packages Projects Releases Wiki Activity

Flatten dashboard sections and emphasize data regions

Browse Source
This commit is contained in:
francy51
2026-03-08 10:38:27 -04:00
parent 7a70545f09
commit 21246df434
16 changed files with 123 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
components/financials/control-bar.tsx
View File

@@ -41,12 +41,12 @@ export function FinancialControlBar({
className
}: FinancialControlBarProps) {
return (
<section className={cn('rounded-xl border border-[color:var(--line-weak)] bg-[color:var(--panel)] px-4 py-3', className)}>
<section className={cn('border-t border-[color:var(--line-weak)] pt-4', 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>
<h3 className="text-base font-semibold text-[color:var(--terminal-bright)]">{title}</h3>
{subtitle ? (
<p className="mt-1 text-xs text-[color:var(--terminal-muted)]">{subtitle}</p>
<p className="mt-1 text-sm text-[color:var(--terminal-muted)]">{subtitle}</p>
) : null}
</div>
@@ -68,29 +68,29 @@ export function FinancialControlBar({
) : 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 className="mt-4 grid grid-cols-1 gap-3">
{sections.map((section) => (
<div
key={section.id}
className="data-surface px-3 py-3"
>
<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>
);