esdras/sistema-de-chamados
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(machines): remove duplicate ping in detail; increase spacing between pulsating dot and label; use auto-fit grid for uniform card widths

Browse source
This commit is contained in:
Esdras Renan 2025-10-10 11:04:52 -03:00
parent ea46514da5
commit b9c8507d0e
1 changed files with 3 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/components/admin/machines/admin-machines-overview.tsx
View file

@ -367,7 +367,7 @@ function MachineStatusBadge({ status }: { status?: string | null }) {
const isOnline = s === "online" const isOnline = s === "online"
return ( return (
<Badge className={cn("inline-flex h-9 items-center gap-2 rounded-full border border-slate-200 px-3 text-sm font-semibold", className)}> <Badge className={cn("inline-flex h-9 items-center gap-3 rounded-full border border-slate-200 px-3 text-sm font-semibold", className)}>
<span className="relative inline-flex items-center"> <span className="relative inline-flex items-center">
<span className={cn("size-2 rounded-full", colorClass)} /> <span className={cn("size-2 rounded-full", colorClass)} />
{isOnline ? ( {isOnline ? (
@ -556,12 +556,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
</div> </div>
<MachineStatusBadge status={machine.status} /> <MachineStatusBadge status={machine.status} />
</div> </div>
{String(machine.status ?? "").toLowerCase() === "online" ? ( {/* ping integrado na badge de status */}
<div className="relative h-2 w-2">
<span className="absolute left-1/2 top-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-500" />
<span className="absolute left-1/2 top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400/30 animate-ping" />
</div>
) : null}
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700"> <Badge variant="outline" className="border-slate-300 bg-slate-100 text-xs font-medium text-slate-700">
{machine.osName ?? "SO desconhecido"} {machine.osVersion ?? ""} {machine.osName ?? "SO desconhecido"} {machine.osVersion ?? ""}
@ -1229,7 +1224,7 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
function MachinesGrid({ machines }: { machines: MachinesQueryItem[] }) { function MachinesGrid({ machines }: { machines: MachinesQueryItem[] }) {
if (!machines || machines.length === 0) return <EmptyState /> if (!machines || machines.length === 0) return <EmptyState />
return ( return (
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"> <div className="grid grid-cols-1 gap-3 [@supports(display:grid)]:grid-cols-[repeat(auto-fit,minmax(280px,1fr))]">
{machines.map((m) => ( {machines.map((m) => (
<MachineCard key={m.id} machine={m} /> <MachineCard key={m.id} machine={m} />
))} ))}