cesnimda
35 lines
2.3 KiB
TypeScript
35 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { Box } from "@mui/material";
|
|
|
|
import { CvTheme } from "../cvBuilder";
|
|
|
|
export default function CvTemplateThumbnail({ theme, height = 150 }: { theme?: CvTheme; height?: number }) {
|
|
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];
|
|
|
|
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>
|
|
);
|
|
}
|