Ajusta layout dos detalhes de atualizações do Windows

This commit is contained in:
codex-bot 2025-10-21 15:58:53 -03:00
parent 3e5e1c759e
commit a043b1203c

View file

@ -87,7 +87,12 @@ type MachineAlertEntry = {
createdAt: number createdAt: number
} }
type DetailLineProps = { label: string; value?: string | number | null; classNameValue?: string } type DetailLineProps = {
label: string
value?: string | number | null
classNameValue?: string
layout?: "spread" | "compact"
}
type GpuAdapter = { type GpuAdapter = {
name?: string name?: string
@ -2472,13 +2477,13 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
) : null} ) : null}
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
<DetailLine label="Modo" value={windowsUpdateMode ?? "—"} /> <DetailLine label="Modo" value={windowsUpdateMode ?? "—"} layout="compact" />
<DetailLine label="Agendamento" value={windowsUpdateScheduleLabel ?? "—"} /> <DetailLine label="Agendamento" value={windowsUpdateScheduleLabel ?? "—"} layout="compact" />
<DetailLine label="Último sucesso" value={windowsUpdateLastSuccessLabel ?? "—"} /> <DetailLine label="Último sucesso" value={windowsUpdateLastSuccessLabel ?? "—"} layout="compact" />
</div> </div>
</div> </div>
{windowsHotfixes.length > 0 ? ( {windowsHotfixes.length > 0 ? (
<div className="w-full rounded-md border border-slate-200 bg-slate-50/80 p-3 lg:ml-auto lg:w-72 lg:flex-shrink-0 lg:self-stretch"> <div className="w-full rounded-md border border-slate-200 bg-slate-50/80 p-3 lg:ml-auto lg:w-[320px] lg:basis-[320px] lg:flex-shrink-0 lg:self-stretch">
<p className="text-xs font-semibold uppercase text-slate-500">Atualizações recentes</p> <p className="text-xs font-semibold uppercase text-slate-500">Atualizações recentes</p>
<ul className="mt-2 space-y-1 text-xs text-muted-foreground"> <ul className="mt-2 space-y-1 text-xs text-muted-foreground">
{windowsHotfixes.slice(0, 3).map((fix) => ( {windowsHotfixes.slice(0, 3).map((fix) => (
@ -3350,15 +3355,30 @@ function MachineCard({ machine, companyName }: { machine: MachinesQueryItem; com
) )
} }
function DetailLine({ label, value, classNameValue }: DetailLineProps) { function DetailLine({ label, value, classNameValue, layout = "spread" }: DetailLineProps) {
if (value === null || value === undefined) return null if (value === null || value === undefined) return null
if (typeof value === "string" && (value.trim() === "" || value === "undefined" || value === "null")) { if (typeof value === "string" && (value.trim() === "" || value === "undefined" || value === "null")) {
return null return null
} }
return ( return (
<div className="flex items-center justify-between gap-4"> <div
className={cn(
"items-center",
layout === "compact"
? "grid grid-cols-[auto_minmax(0,1fr)] gap-3"
: "flex justify-between gap-4"
)}
>
<span>{label}</span> <span>{label}</span>
<span className={cn("text-right font-medium text-foreground", classNameValue)}>{value}</span> <span
className={cn(
"font-medium text-foreground",
layout === "compact" ? "text-left" : "text-right",
classNameValue
)}
>
{value}
</span>
</div> </div>
) )
} }