DESKTOP-PUHFO60\dsx2016
937c0090d5
Prefer media/preview.html over raster covers so catalog cards mirror each LVGL screen. Co-authored-by: Cursor <cursoragent@cursor.com>
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import type { FirmwareInfo } from "@/lib/firmware";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** Renders HTML on-device UI mock (preferred) — never uses raster covers. */
|
|
export function FirmwarePreview({
|
|
fw,
|
|
className,
|
|
title,
|
|
}: {
|
|
fw: FirmwareInfo;
|
|
className?: string;
|
|
title?: string;
|
|
}) {
|
|
if (fw.media.preview) {
|
|
return (
|
|
<iframe
|
|
title={title || `${fw.name} UI preview`}
|
|
src={fw.media.preview}
|
|
className={cn("h-full w-full border-0 bg-[#0A1016]", className)}
|
|
loading="lazy"
|
|
sandbox="allow-scripts"
|
|
tabIndex={-1}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const initials = fw.name
|
|
.replace(/[^A-Za-z0-9\u4e00-\u9fff]+/g, " ")
|
|
.trim()
|
|
.split(/\s+/)
|
|
.slice(0, 2)
|
|
.map((w) => w[0]?.toUpperCase() ?? "")
|
|
.join("");
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex h-full w-full flex-col items-center justify-center gap-2 bg-[radial-gradient(ellipse_at_30%_20%,rgba(240,197,10,0.18),transparent_55%),linear-gradient(160deg,#1a1610,#0e0c09)]",
|
|
className
|
|
)}
|
|
>
|
|
<span className="font-[family-name:var(--font-display)] text-3xl font-extrabold tracking-tight text-[var(--accent-hot)]/80">
|
|
{initials || "FW"}
|
|
</span>
|
|
<span className="text-[0.65rem] uppercase tracking-[0.14em] text-[var(--muted)]">
|
|
HTML preview soon
|
|
</span>
|
|
</div>
|
|
);
|
|
}
|