yann schemas and colours

Frontend/components/cvTemplateSelection.tsx

@@ -15,11 +15,28 @@ import { useStore } from "@nanostores/react";
 export const CVTemplateShowcase = () => {
   const router = useRouter();
   const selectedTemplate = useStore($selectedTemplate);
-  const templates = [
-    { id: 1, selectedColor: "purple-rose", image: bender },
-    { id: 2, selectedColor: "blue-teal", image: bender },
-    { id: 3, selectedColor: "orange-yellow", image: bender },
-    { id: 4, selectedColor: "green-lime", image: bender },
+  const templatesModern1 = [
+    { id: 1, selectedColor: "grayScale", image: bender },
+    { id: 2, selectedColor: "blueShades", image: bender },
+    { id: 3, selectedColor: "earthTones", image: bender },
+    { id: 4, selectedColor: "mintFresh", image: bender },
+    { id: 5, selectedColor: "purpleHaze", image: bender },
+    { id: 6, selectedColor: "sunsetOrange", image: bender },
+    { id: 7, selectedColor: "oceanBreeze", image: bender },
+    { id: 8, selectedColor: "roseGold", image: bender },
+  ]
+  const templatesModern2 = [
+    { id: 9, selectedColor: "purple-rose", image: bender },
+    { id: 10, selectedColor: "blue-teal", image: bender },
+    { id: 11, selectedColor: "orange-yellow", image: bender },
+    { id: 12, selectedColor: "green-lime", image: bender },
+  ];
+
+  const templatesModern3 = [
+    { id: 13, selectedColor: "greenGold", image: bender },
+    { id: 14, selectedColor: "navyBlue", image: bender },
+    { id: 15, selectedColor: "burgundy", image: bender },
+    { id: 16, selectedColor: "charcoal", image: bender },
   ];
 
   const handleCardClick = (template: SelectedTemplate) => {
@@ -38,21 +55,80 @@ export const CVTemplateShowcase = () => {
   return (
     <div className="max-w-6xl mx-auto p-8">
       <h2 className="text-2xl font-bold mb-6 text-white">
-        Professionnel et élégant
+        Modernes et minimalistes
+      </h2>
+      <div className="flex flex-col items-center">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {templatesModern1.map((template) => (
+            <div
+              key={template.id}
+              className={`
+              bg-white rounded-lg overflow-hidden shadow-md 
+              transition-all duration-300 cursor-pointer
+              ${selectedTemplate?.id === template.id
+                  ? "ring-4 ring-blue-500 shadow-xl scale-105"
+                  : "hover:shadow-xl hover:scale-102"
+                }
+            `}
+              onClick={() => handleCardClick(template)}
+            >
+              <Image
+                src={template.image}
+                alt={`Template ${template.selectedColor}`}
+                width={150}
+                height={200}
+                layout="responsive"
+                className="object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <h2 className="text-2xl font-bold mb-6 text-white">
+        Colorés et créatifs
+      </h2>
+      <div className="flex flex-col items-center">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+          {templatesModern2.map((template) => (
+            <div
+              key={template.id}
+              className={`
+              bg-white rounded-lg overflow-hidden shadow-md 
+              transition-all duration-300 cursor-pointer
+              ${selectedTemplate?.id === template.id
+                  ? "ring-4 ring-blue-500 shadow-xl scale-105"
+                  : "hover:shadow-xl hover:scale-102"
+                }
+            `}
+              onClick={() => handleCardClick(template)}
+            >
+              <Image
+                src={template.image}
+                alt={`Template ${template.selectedColor}`}
+                width={150}
+                height={200}
+                layout="responsive"
+                className="object-cover"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+      <h2 className="text-2xl font-bold mb-6 text-white">
+        Professionels et élégants
       </h2>
       <div className="flex flex-col items-center">
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-          {templates.map((template) => (
+          {templatesModern3.map((template) => (
             <div
               key={template.id}
               className={`
               bg-white rounded-lg overflow-hidden shadow-md 
               transition-all duration-300 cursor-pointer
-              ${
-                selectedTemplate?.id === template.id
+              ${selectedTemplate?.id === template.id
                   ? "ring-4 ring-blue-500 shadow-xl scale-105"
                   : "hover:shadow-xl hover:scale-102"
-              }
+                }
             `}
               onClick={() => handleCardClick(template)}
             >
@@ -67,16 +143,16 @@ export const CVTemplateShowcase = () => {
             </div>
           ))}
         </div>
-        <Button
-          onClick={handleSelection}
-          className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-1"
-          disabled={!selectedTemplate}
-        >
-          {selectedTemplate
-            ? "Sélectionner ce template"
-            : "Veuillez choisir un template"}
-        </Button>
       </div>
+      <Button
+        onClick={handleSelection}
+        className="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-full transition duration-300 ease-in-out transform hover:-translate-y-1"
+        disabled={!selectedTemplate}
+      >
+        {selectedTemplate
+          ? "Sélectionner ce template"
+          : "Veuillez choisir un template"}
+      </Button>
     </div>
   );
 };

Frontend/components/personalInfoForm.tsx

@@ -20,6 +20,7 @@ export const PersonalInfoForm: React.FC = () => {
   const formData = useStore($formData);
   const selectedTemplate = useStore($selectedTemplate);
 
+  console.log(selectedTemplate);
   const handlePersonalInfoChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => {
@@ -129,6 +130,7 @@ export const PersonalInfoForm: React.FC = () => {
           values={{
             data: formData,
             selectedColor: selectedTemplate && selectedTemplate.selectedColor,
+            templateId: selectedTemplate?.id ?? 1
           }}
         />
       </div>

Frontend/components/printableTemplate.tsx

@@ -1,29 +1,42 @@
 "use client";
 
 import { forwardRef } from "react";
+import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3, ModernCV1Props } from "@/utils/templatesType";
+import ModernCV1 from "./resumesTemplates/MRT1";
 import ModernCV2 from "./resumesTemplates/MRT2";
-import { mockData } from "@/utils/mock";
-import { ColorSchemeName, Props } from "@/utils/templatesType";
+import ModernCV3 from "./resumesTemplates/MRT3";
 
-export type DataType = Props["data"];
+export type DataType = ModernCV1Props["data"];
 
 type PrintableTemplateProps = {
   data: DataType;
-  selectedColor: ColorSchemeName;
+  selectedColor: ColorSchemeName1 | ColorSchemeName2 | ColorSchemeName3;
+  templateId: number;
 };
 
 const PrintableTemplate = forwardRef<HTMLDivElement, PrintableTemplateProps>(
-  ({ data, selectedColor }, ref) => {
-    // TODO: Rendre ce btn dynamique
+  ({ data, selectedColor, templateId }, ref) => {
+const renderTemplate = () => {
+  if (templateId >= 1 && templateId <= 8) {
+    return <ModernCV1 data={data} selectedColor={selectedColor as ColorSchemeName1} />;
+  } else if (templateId >= 9 && templateId <= 12) {
+    return <ModernCV2 data={data} selectedColor={selectedColor as ColorSchemeName2} />;
+  } else if (templateId >= 13 && templateId <= 16) {
+    return <ModernCV3 data={data} selectedColor={selectedColor as ColorSchemeName3} />;
+  } else {
+    return <div>Template non trouvé</div>;
+  }
+};
+
     return (
       <div className="h-0 overflow-hidden">
         <div ref={ref} className="">
-          <ModernCV2 data={data} selectedColor={selectedColor} />
+          {renderTemplate()}
         </div>
       </div>
     );
   }
 );
 PrintableTemplate.displayName = "PrintableTemplate";
 
-export { PrintableTemplate };
+export { PrintableTemplate };

Frontend/components/printbutton.tsx

@@ -1,14 +1,14 @@
 "use client";
-import { FileTextIcon } from "lucide-react";
 import { useRef } from "react";
 import { useReactToPrint } from "react-to-print";
 import { DataType, PrintableTemplate } from "./printableTemplate";
 import { Button } from "./ui/button";
-import { ColorSchemeName } from "@/utils/templatesType";
+import { ColorSchemeName1, ColorSchemeName2, ColorSchemeName3 } from "@/utils/templatesType";
 
 type FormData = {
   selectedColor: string | null;
   data: DataType;
+  templateId: number; // Ajout de cette ligne
 };
 
 interface RequestEvaluationDocumentButtonProps {
@@ -33,12 +33,13 @@ const PrintButton = ({ values }: RequestEvaluationDocumentButtonProps) => {
     >
       Générer le Cv
       <PrintableTemplate
-        selectedColor={values.selectedColor as ColorSchemeName}
+        selectedColor={values.selectedColor as ColorSchemeName1 | ColorSchemeName2 | ColorSchemeName3}
         data={values.data}
+        templateId={values.templateId} // Utilisation du templateId
         ref={documentRef}
       />
     </Button>
   );
 };
 
-export { PrintButton };
+export { PrintButton };

Frontend/components/resumesTemplates/MRT1.tsx

@@ -0,0 +1,112 @@
+import React from "react";
+import Image from "next/image";
+import { ModernCV1Props } from "@/utils/templatesType";
+import { ColorScheme1 } from "@/utils/TemplatesColors";
+
+export const ModernCV1 = ({ data, selectedColor }: ModernCV1Props) => {
+  const { personalInfo, education, experiences, skills, languages, interests } = data;
+
+  return (
+    <div className="max-w-4xl mx-auto p-8 bg-white shadow-lg rounded-lg font-sans">
+      <header className={`mb-8 flex items-center ${ColorScheme1[selectedColor]?.headerBg} ${ColorScheme1[selectedColor]?.headerText} p-6 rounded-lg`}>
+        <div className="mr-6">
+          {personalInfo.photo && (
+            <Image
+              src={personalInfo.photo}
+              alt="Profile"
+              width={128}
+              height={128}
+              className="rounded-full object-cover border-4 border-white shadow-lg"
+            />
+          )}
+        </div>
+        <div>
+          <h1 className="text-4xl font-bold">{personalInfo.fullName}</h1>
+          <p className="text-xl mt-2 opacity-90">{experiences[0]?.jobTitle}</p>
+        </div>
+      </header>
+
+      <div className="grid grid-cols-3 gap-6">
+        <div className="col-span-1">
+          <section className={`mb-6 ${ColorScheme1[selectedColor]?.accentBg} p-4 rounded-lg`}>
+            <h2 className={`text-xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-3 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Informations</h2>
+            <ul className="space-y-2 text-sm">
+              <li><span className="font-medium">Téléphone:</span> {personalInfo.phoneNumber}</li>
+              <li><span className="font-medium">Email:</span> {personalInfo.email}</li>
+              <li><span className="font-medium">Adresse:</span> {personalInfo.postalAddress}</li>
+              <li><span className="font-medium">Date de naissance:</span> {personalInfo.dateOfBirth}</li>
+              <li><span className="font-medium">Permis:</span> {personalInfo.drivingLicenseType}</li>
+              <li><span className="font-medium">LinkedIn:</span> <a href={personalInfo.linkedinUrl} className={`${ColorScheme1[selectedColor]?.accentText} hover:underline`}>{personalInfo.linkedinUrl}</a></li>
+            </ul>
+          </section>
+
+          <section className={`mb-6 ${ColorScheme1[selectedColor]?.accentBg} p-4 rounded-lg`}>
+            <h2 className={`text-xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-3 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Compétences</h2>
+            <ul className="space-y-2">
+              {skills.map((item, index) => (
+                <li key={index} className="flex flex-col">
+                  <span className="text-sm mb-1">{item.skill}</span>
+                  <div className="w-full bg-gray-200 rounded-full h-2">
+                    <div
+                      className={`${ColorScheme1[selectedColor]?.progressFill} h-2 rounded-full`}
+                      style={{ width: `${item.proficiencyLevel * 20}%` }}
+                    ></div>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          <section className={`mb-6 ${ColorScheme1[selectedColor]?.accentBg} p-4 rounded-lg`}>
+            <h2 className={`text-xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-3 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Langues</h2>
+            <ul className="space-y-1 text-sm">
+              {languages.map((item, index) => (
+                <li key={index}>{`${item.language} - ${item.proficiencyLevel}`}</li>
+              ))}
+            </ul>
+          </section>
+
+          <section className={`${ColorScheme1[selectedColor]?.accentBg} p-4 rounded-lg`}>
+            <h2 className={`text-xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-3 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Centres d'intérêt</h2>
+            <ul className="list-disc list-inside text-sm">
+              {interests.map((item, index) => (
+                <li key={index}>{item}</li>
+              ))}
+            </ul>
+          </section>
+        </div>
+
+        <div className="col-span-2">
+          <section className="mb-6">
+            <h2 className={`text-2xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-4 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Expériences professionnelles</h2>
+            {experiences.map((experience, index) => (
+              <div key={index} className="mb-4">
+                <h3 className="text-lg font-medium">{experience.jobTitle}</h3>
+                <p className={`${ColorScheme1[selectedColor]?.accentText} font-medium`}>{experience.companyName}</p>
+                <p className="text-sm text-gray-600 mb-2">{`${experience.startDate} - ${experience.endDate || 'Présent'}`}</p>
+                <ul className="list-disc list-inside text-sm">
+                  {experience.technicalSkills.split('\n').map((item, i) => (
+                    <li key={i}>{item}</li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </section>
+
+          <section>
+            <h2 className={`text-2xl font-semibold ${ColorScheme1[selectedColor]?.accentText} mb-4 ${ColorScheme1[selectedColor]?.accentBorder} border-b pb-2`}>Formation</h2>
+            {education.map((formation, index) => (
+              <div key={index} className="mb-3">
+                <h3 className="text-lg font-medium">{formation.degree}</h3>
+                <p className={`${ColorScheme1[selectedColor]?.accentText}`}>{formation.institution}</p>
+                <p className="text-sm text-gray-600">{formation.yearObtained}</p>
+              </div>
+            ))}
+          </section>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ModernCV1;