91 lines
6.0 KiB
JavaScript
91 lines
6.0 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { ClipboardList, Calendar } from "lucide-react";
|
|
const MarksheetPreview = ({ template, studentName, courseName, completionDate, logoUrl }) => {
|
|
const { template_data } = template;
|
|
const overallGrade = "A";
|
|
const overallPercentage = 91;
|
|
return /* @__PURE__ */ jsxs(
|
|
"div",
|
|
{
|
|
className: "relative min-h-[500px] rounded-lg border-4 p-8 shadow-lg",
|
|
style: {
|
|
backgroundColor: template_data.backgroundColor,
|
|
borderColor: template_data.borderColor,
|
|
fontFamily: template_data.fontFamily
|
|
},
|
|
children: [
|
|
/* @__PURE__ */ jsx("div", { className: "mb-6 border-b-2 pb-4", style: { borderColor: template_data.borderColor }, children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
|
|
logoUrl || template.logo_path ? /* @__PURE__ */ jsx("div", { className: "h-16 w-16", children: /* @__PURE__ */ jsx("img", { src: logoUrl || template.logo_path || "", alt: "Logo", className: "h-full w-full object-contain" }) }) : /* @__PURE__ */ jsx(ClipboardList, { className: "h-12 w-12", style: { color: template_data.primaryColor } }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold", style: { color: template_data.primaryColor, fontFamily: template_data.fontFamily }, children: template_data.headerText }),
|
|
/* @__PURE__ */ jsx("p", { className: "text-lg", style: { color: template_data.secondaryColor, fontFamily: template_data.fontFamily }, children: template_data.institutionName })
|
|
] })
|
|
] }) }) }),
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-6 grid grid-cols-2 gap-4", children: [
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: template_data.secondaryColor }, children: "Student Name" }),
|
|
/* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", style: { color: template_data.primaryColor }, children: studentName })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: template_data.secondaryColor }, children: "Course" }),
|
|
/* @__PURE__ */ jsx("p", { className: "text-lg font-semibold", style: { color: template_data.primaryColor }, children: courseName })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: template_data.secondaryColor }, children: "Completion Date" }),
|
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
|
|
/* @__PURE__ */ jsx(Calendar, { className: "h-4 w-4", style: { color: template_data.secondaryColor } }),
|
|
/* @__PURE__ */ jsx("p", { className: "font-medium", style: { color: template_data.primaryColor }, children: completionDate })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
/* @__PURE__ */ jsx("p", { className: "text-sm", style: { color: template_data.secondaryColor }, children: "Overall Grade" }),
|
|
/* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", style: { color: template_data.primaryColor }, children: [
|
|
overallGrade,
|
|
" (",
|
|
overallPercentage,
|
|
"%)"
|
|
] })
|
|
] })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
|
|
/* @__PURE__ */ jsx("h3", { className: "mb-3 text-lg font-semibold", style: { color: template_data.primaryColor }, children: "Exam Type" }),
|
|
/* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border", style: { borderColor: template_data.borderColor }, children: /* @__PURE__ */ jsxs("table", { className: "w-full", children: [
|
|
/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { style: { backgroundColor: `${template_data.primaryColor}20` }, children: [
|
|
/* @__PURE__ */ jsx(
|
|
"th",
|
|
{
|
|
className: "border-b p-3 text-left font-semibold",
|
|
style: { color: template_data.primaryColor, borderColor: template_data.borderColor },
|
|
children: "Exam Type"
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
"th",
|
|
{
|
|
className: "border-b p-3 text-right font-semibold",
|
|
style: { color: template_data.primaryColor, borderColor: template_data.borderColor },
|
|
children: "Total Marks"
|
|
}
|
|
)
|
|
] }) }),
|
|
/* @__PURE__ */ jsxs("tbody", { children: [
|
|
/* @__PURE__ */ jsxs("tr", { className: "border-b", style: { borderColor: template_data.borderColor }, children: [
|
|
/* @__PURE__ */ jsx("td", { className: "p-3", style: { color: template_data.secondaryColor }, children: "Assignment" }),
|
|
/* @__PURE__ */ jsx("td", { className: "p-3 text-right font-medium", style: { color: template_data.primaryColor }, children: "10/50" })
|
|
] }),
|
|
/* @__PURE__ */ jsxs("tr", { children: [
|
|
/* @__PURE__ */ jsx("td", { className: "p-3", style: { color: template_data.secondaryColor }, children: "Quiz" }),
|
|
/* @__PURE__ */ jsx("td", { className: "p-3 text-right font-medium", style: { color: template_data.primaryColor }, children: "0/0" })
|
|
] })
|
|
] })
|
|
] }) })
|
|
] }),
|
|
/* @__PURE__ */ jsx("div", { className: "mt-8 border-t-2 pt-4 text-center", 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 {
|
|
MarksheetPreview as default
|
|
};
|