50 lines
1.8 KiB
TypeScript
50 lines
1.8 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 competencesHtml = useMemo(
|
|
() => markdownToHtml(data.competences),
|
|
[data.competences],
|
|
);
|
|
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}
|
|
competencesHtml={competencesHtml}
|
|
softSkillsHtml={softSkillsHtml}
|
|
centresInteretHtml={centresInteretHtml}
|
|
/>
|
|
<CvRightColumn experiences={experiences} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |