button arrangement

This commit is contained in:
legop3
2026-04-26 22:53:05 -04:00
parent ae6d2df0a2
commit a5705ede2b
3 changed files with 25 additions and 27 deletions
+23 -25
View File
@@ -135,12 +135,12 @@ export default function VipNeatoCard({
<div className="grid gap-0.5 grid-cols-1 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
<section className="surface-muted px-0.5 py-0.5">
<div className="grid gap-0.5">
<div className="rounded-md bg-slate-800 px-1 py-0.75 text-center">
<div className="text-xs text-slate-300">State</div>
<div className="text-base font-semibold text-slate-100">{primaryState}</div>
</div>
<div className="grid grid-cols-2 gap-0.5">
<div className="grid grid-cols-1 md:grid-cols-3 gap-0.5">
<div className="grid gap-0.5">
<div className="rounded-md bg-slate-800 px-1 py-0.75 text-center">
<div className="text-xs text-slate-300">State</div>
<div className="text-base font-semibold text-slate-100">{primaryState}</div>
</div>
<button
type="button"
disabled={!canRunPrimary || Boolean(working)}
@@ -149,26 +149,24 @@ export default function VipNeatoCard({
>
{working === primaryAction.key ? primaryAction.pending : primaryAction.label}
</button>
<div className="grid grid-cols-2 gap-0.5">
<button
type="button"
disabled={!canRunLocate || Boolean(working)}
onClick={() => runAction('locate', onLocate)}
className="rounded-md bg-fuchsia-600 px-1 py-0.75 text-sm font-semibold text-white transition hover:bg-fuchsia-500 disabled:opacity-50"
>
{working === 'locate' ? 'Playing...' : 'Play sound'}
</button>
<button
type="button"
disabled={!canRunClearErrors || Boolean(working)}
onClick={() => runAction('clearErrors', onClearErrors)}
className="rounded-md bg-amber-500 px-1 py-0.75 text-sm font-semibold text-slate-900 transition hover:bg-amber-400 disabled:opacity-50"
>
{working === 'clearErrors' ? 'Clearing...' : 'Clear errors'}
</button>
</div>
</div>
<button
type="button"
disabled={!canRunLocate || Boolean(working)}
onClick={() => runAction('locate', onLocate)}
className="rounded-md bg-fuchsia-600 px-1 py-0.75 text-sm font-semibold text-white transition hover:bg-fuchsia-500 disabled:opacity-50"
>
{working === 'locate' ? 'Playing...' : 'Play sound'}
</button>
<button
type="button"
disabled={!canRunClearErrors || Boolean(working)}
onClick={() => runAction('clearErrors', onClearErrors)}
className="rounded-md bg-amber-500 px-1 py-0.75 text-sm font-semibold text-slate-900 transition hover:bg-amber-400 disabled:opacity-50"
>
{working === 'clearErrors' ? 'Clearing...' : 'Clear errors'}
</button>
</div>
</section>