Ajusta layout dos detalhes de atualizações do Windows
This commit is contained in:
parent
3e5e1c759e
commit
a043b1203c
1 changed files with 28 additions and 8 deletions
|
|
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue