chore init

components/cv/CvPreview.tsx

@@ -0,0 +1,45 @@
+"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>
+  );
+}