cesnimda
66 lines
3.7 KiB
TypeScript
66 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Box } from "@mui/material";
|
|
|
|
import { CvTheme, cvBuilderApi } from "../cvBuilder";
|
|
|
|
const previewCache = new Map<string, string>();
|
|
|
|
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";
|
|
const layout = theme?.layout || "header-band";
|
|
const hasSidebar = layout === "sidebar-left" || layout === "sidebar-right";
|
|
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 }} />)}
|
|
</Box>;
|
|
const side = <Box sx={{ bgcolor: sidebar, p: "13% 12%", minWidth: 0 }}>
|
|
<Box sx={{ width: 24, height: 24, borderRadius: theme?.photoShape === "circle" ? "50%" : 1, bgcolor: "rgba(255,255,255,.78)", border: "1px solid rgba(15,23,42,.1)", mb: 1.2 }} />
|
|
{[66, 86, 54, 74, 62, 79].map((width) => <Box key={width} sx={{ width: `${width}%`, height: 2.5, borderRadius: 2, bgcolor: "rgba(30,41,59,.3)", mb: 0.8 }} />)}
|
|
</Box>;
|
|
|
|
return (
|
|
<Box aria-hidden sx={{ height, bgcolor: paper, border: "1px solid", borderColor: "divider", borderRadius: 1.5, overflow: "hidden", boxShadow: "0 8px 20px rgba(15,23,42,.08)", display: "flex", flexDirection: "column" }}>
|
|
{!hasSidebar && <Box sx={{ height: layout === "header-band" ? "25%" : 8, bgcolor: layout === "header-band" ? accent : paper, borderBottom: layout === "header-band" ? 0 : `2px solid ${accent}`, p: layout === "header-band" ? "6%" : 0 }}>
|
|
{layout === "header-band" && <><Box sx={{ width: "42%", height: 5, bgcolor: "rgba(255,255,255,.9)", mb: 0.75 }} /><Box sx={{ width: "30%", height: 2.5, bgcolor: "rgba(255,255,255,.65)" }} /></>}
|
|
</Box>}
|
|
<Box sx={{ flex: 1, minHeight: 0, display: "grid", gridTemplateColumns: hasSidebar ? (sidebarRight ? "1fr 32%" : "32% 1fr") : "1fr" }}>
|
|
{hasSidebar && !sidebarRight ? side : null}{body}{hasSidebar && sidebarRight ? side : null}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|