cesnimda/jobtrackingapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cv): keep template thumbnails distinct
CI and Deploy / test (push) Failing after 2m51s
Details
CI and Deploy / deploy (push) Has been skipped
Details

Browse Source
This commit is contained in:
cesnimda
2026-09-01 19:38:16 +02:00
parent d9ec37d717
commit 4b2d249114
3 changed files with 35 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
job-tracker-ui/src/components/CvTemplateThumbnail.tsx
+2 -33
View File
@@ -1,12 +1,9 @@
import React, { useEffect, useState } from "react";
import React from "react";
import { Box } from "@mui/material";
import { CvTheme, cvBuilderApi } from "../cvBuilder";
const previewCache = new Map<string, string>();
import { CvTheme } from "../cvBuilder";
export default function CvTemplateThumbnail({ theme, height = 150 }: { theme?: CvTheme; height?: number }) {
const [previewHtml, setPreviewHtml] = useState(() => theme ? previewCache.get(theme.id) ?? "" : "");
const accent = theme?.swatches?.[0] || "#3157d5";
const sidebar = theme?.swatches?.[1] || "#eef1f4";
const paper = theme?.swatches?.[2] || "#ffffff";
@@ -15,34 +12,6 @@ export default function CvTemplateThumbnail({ theme, height = 150 }: { theme?: C
const sidebarRight = layout === "sidebar-right";
const lines = [92, 72, 84, 61, 88, 76, 95, 67];
useEffect(() => {
if (!theme) return;
const cached = previewCache.get(theme.id);
if (cached) {
setPreviewHtml(cached);
return;
}
setPreviewHtml("");
let active = true;
void cvBuilderApi.themePreview(theme.id).then((render) => {
previewCache.set(theme.id, render.html);
if (active) setPreviewHtml(render.html);
}).catch(() => undefined);
return () => { active = false; };
}, [theme]);
if (previewHtml) {
const scale = height / (297 * 96 / 25.4);
return (
<Box aria-hidden sx={{ height, bgcolor: "#dfe4ea", border: "1px solid", borderColor: "divider", borderRadius: 1.5, overflow: "hidden", display: "flex", justifyContent: "center" }}>
<Box sx={{ width: height * 210 / 297, height, bgcolor: "#fff", boxShadow: "0 5px 14px rgba(15,23,42,.15)", overflow: "hidden" }}>
<iframe title={`${theme?.name ?? "CV"} template preview`} srcDoc={previewHtml} sandbox="allow-same-origin" tabIndex={-1}
style={{ width: "210mm", height: "297mm", border: 0, display: "block", transform: `scale(${scale})`, transformOrigin: "top left", pointerEvents: "none" }} />
</Box>
</Box>
);
}
const body = <Box sx={{ p: "7%", minWidth: 0 }}>
<Box sx={{ width: "48%", height: 5, borderRadius: 2, bgcolor: accent, mb: 1 }} />
{lines.map((width, index) => <Box key={index} sx={{ width: `${width}%`, height: index === 4 ? 4 : 2.5, borderRadius: 2, bgcolor: index === 4 ? accent : "rgba(51,65,85,.24)", mt: index === 4 ? 1.25 : 0, mb: 0.7 }} />)}