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
}
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 = {
name?: string
@ -2472,13 +2477,13 @@ export function MachineDetails({ machine }: MachineDetailsProps) {
) : null}
</div>
<div className="grid gap-2">
<DetailLine label="Modo" value={windowsUpdateMode ?? "—"} />
<DetailLine label="Agendamento" value={windowsUpdateScheduleLabel ?? "—"} />
<DetailLine label="Último sucesso" value={windowsUpdateLastSuccessLabel ?? "—"} />
<DetailLine label="Modo" value={windowsUpdateMode ?? "—"} layout="compact" />
<DetailLine label="Agendamento" value={windowsUpdateScheduleLabel ?? "—"} layout="compact" />
<DetailLine label="Último sucesso" value={windowsUpdateLastSuccessLabel ?? "—"} layout="compact" />
</div>
</div>
{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>
<ul className="mt-2 space-y-1 text-xs text-muted-foreground">
{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 (typeof value === "string" && (value.trim() === "" || value === "undefined" || value === "null")) {
return null
}
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 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>
)
}