Files
cv-maker/components/cv/CvPreview.tsx
T
2026-09-16 21:34:09 +02:00

45 lines
1.7 KiB
TypeScript

"use client";
import { useMemo } from "react";
import { markdownToHtml } from "@/lib/markdown";
import type { CVCareerData } from "@/lib/types/cv";
import { CvHeader } from "@/components/cv/CvHeader";
import { CvLeftColumn } from "@/components/cv/CvLeftColumn";
import { CvRightColumn } from "@/components/cv/CvRightColumn";
import type { CvExperienceRendered } from "@/components/cv/CvExperiencePreview";
export function CvPreview({ data }: { data: CVCareerData }) {
const accrocheHtml = useMemo(() => markdownToHtml(data.accroche), [data.accroche]);
const etatCivilHtml = useMemo(() => markdownToHtml(data.etatCivil), [data.etatCivil]);
const formationsHtml = useMemo(() => markdownToHtml(data.formations), [data.formations]);
const softSkillsHtml = useMemo(() => markdownToHtml(data.softSkills), [data.softSkills]);
const centresInteretHtml = useMemo(
() => markdownToHtml(data.centresInteret),
[data.centresInteret],
);
const experiences = useMemo<CvExperienceRendered[]>(
() =>
data.experiences.map((experience) => ({
experience,
html: markdownToHtml(experience.contenu),
})),
[data.experiences],
);
return (
<div className="flex justify-center overflow-x-auto p-6 print:block print:p-0 print:overflow-visible">
<div className="cv-sheet">
<CvHeader html={accrocheHtml} />
<div className="cv-sheet-body">
<CvLeftColumn
etatCivilHtml={etatCivilHtml}
formationsHtml={formationsHtml}
softSkillsHtml={softSkillsHtml}
centresInteretHtml={centresInteretHtml}
/>
<CvRightColumn experiences={experiences} />
</div>
</div>
</div>
);
}