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
|
||||
}
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue