165 lines
5.1 KiB
JavaScript
165 lines
5.1 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { Award, Calendar } from "lucide-react";
|
|
const CertificatePreview = ({ template, studentName, courseName, completionDate, logoUrl }) => {
|
|
const { template_data } = template;
|
|
return /* @__PURE__ */ jsxs(
|
|
"div",
|
|
{
|
|
className: "relative flex min-h-[400px] flex-col justify-center rounded-lg border-4 p-8 text-center shadow-lg",
|
|
style: {
|
|
backgroundColor: template_data.backgroundColor,
|
|
borderColor: template_data.borderColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: "absolute inset-4 rounded border-2",
|
|
style: {
|
|
borderColor: template_data.primaryColor
|
|
}
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs("div", { className: "relative z-10 space-y-6", children: [
|
|
(logoUrl || template.logo_path) && /* @__PURE__ */ jsx("div", { className: "mx-auto mb-4 flex h-16 w-16 items-center justify-center", children: /* @__PURE__ */ jsx("img", { src: logoUrl || template.logo_path || "", alt: "Logo", className: "h-full w-full object-contain" }) }),
|
|
!logoUrl && !template.logo_path && /* @__PURE__ */ jsx(
|
|
Award,
|
|
{
|
|
className: "mx-auto mb-3 h-12 w-12",
|
|
style: {
|
|
color: template_data.borderColor
|
|
}
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx(
|
|
"h2",
|
|
{
|
|
className: "mb-2 text-3xl font-bold",
|
|
style: {
|
|
color: template_data.primaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: template_data.titleText
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: "mx-auto h-1 w-32",
|
|
style: {
|
|
backgroundColor: template_data.borderColor
|
|
}
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: "text-lg",
|
|
style: {
|
|
color: template_data.secondaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: template_data.descriptionText
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs("div", { className: "relative py-4", children: [
|
|
/* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: "text-3xl font-bold",
|
|
style: {
|
|
color: template_data.primaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: studentName
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: "mx-auto mt-2 h-0.5 w-48",
|
|
style: {
|
|
backgroundColor: template_data.borderColor
|
|
}
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: "text-lg",
|
|
style: {
|
|
color: template_data.secondaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: template_data.completionText
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: "text-2xl font-semibold",
|
|
style: {
|
|
color: template_data.primaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: courseName
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 pt-4", children: [
|
|
/* @__PURE__ */ jsx(
|
|
Calendar,
|
|
{
|
|
className: "h-4 w-4",
|
|
style: {
|
|
color: template_data.secondaryColor
|
|
}
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsxs(
|
|
"p",
|
|
{
|
|
className: "text-sm",
|
|
style: {
|
|
color: template_data.secondaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: [
|
|
"Completed on: ",
|
|
completionDate
|
|
]
|
|
}
|
|
)
|
|
] }),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: "mt-6 border-t pt-4",
|
|
style: {
|
|
borderColor: template_data.borderColor
|
|
},
|
|
children: /* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: "text-sm",
|
|
style: {
|
|
color: template_data.secondaryColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: template_data.footerText
|
|
}
|
|
)
|
|
}
|
|
)
|
|
] })
|
|
]
|
|
}
|
|
);
|
|
};
|
|
export {
|
|
CertificatePreview as default
|
|
};
|