Feat/add export to pdf

package.json

@@ -13,6 +13,8 @@
     "@google/generative-ai": "^0.24.1",
     "@tailwindcss/vite": "^4.1.12",
     "@types/react-datepicker": "^6.2.0",
+    "html2pdf.js": "^0.12.0",
+    "pdfmake": "^0.2.20",
     "react": "^19.1.1",
     "react-datepicker": "^8.7.0",
     "react-dom": "^19.1.1",
@@ -21,6 +23,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
+    "@types/html2pdf.js": "^0.10.0",
+    "@types/pdfmake": "^0.2.11",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",

src/components/ExportPdf/PdfExportButton.tsx

@@ -0,0 +1,45 @@
+import  { useRef, useState } from "react";
+import { Button } from  "../Button"
+import html2pdf from "html2pdf.js";
+
+export function PdfExporter() {
+  const pdfRef = useRef(null);
+  const [loading, setLoading] = useState(false);
+
+  const handleExportPdf = async () => {
+    setLoading(true);
+    const element = pdfRef.current;
+    if (element) {
+      const options = {
+        margin: 10,
+        filename: "curriculo.pdf",
+        image: { type: "jpeg", quality: 0.98 },
+        html2canvas: { scale: 2 },
+        jsPDF: { unit: "mm", format: "a4", orientation: "portrait" },
+      };
+
+      try {
+        await html2pdf().from(element).set(options).save();
+      } catch (error) {
+        console.error("Erro ao gerar PDF:", error);
+      } finally {
+        setLoading(false);
+      }
+    } else {
+      console.error("Elemento para exportação de PDF não encontrado.");
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center p-4">
+      <Button
+        label={loading ? "Gerando PDF..." : "Exportar para PDF"}
+        onClick={handleExportPdf}
+        variant="primary"
+        tooltip="Exportar currículo como PDF"
+      />
+
+    </div>
+  );
+}

src/components/form/preview/Preview.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+
 import { PreviewHeader } from "./PreviewHeader";
 import { PreviewResumo } from "./PreviewResumo";
 import { PreviewExtraContacts } from "./PreviewExtraContacts";
@@ -8,13 +8,13 @@ import { PreviewHabilidades } from "./PreviewHabilidades";
 
 export function Preview() {
   return (
-    <div className="space-y-4">
-      <PreviewHeader />
-      <PreviewResumo />
-      <PreviewExtraContacts />
-      <PreviewEducacao />
-      <PreviewExperiencias />
-      <PreviewHabilidades />
-    </div>
+      <div className="bg-white rounded p-4 space-y-4">
+        <PreviewHeader />
+        <PreviewResumo />
+        <PreviewExtraContacts />
+        <PreviewEducacao />
+        <PreviewExperiencias />
+        <PreviewHabilidades />
+      </div>
   );
-}
+}

src/components/form/preview/PreviewEducacao.tsx

@@ -7,7 +7,7 @@ export function PreviewEducacao() {
   if (educacao.length === 0) return null;
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4">
       <h2 className="text-xl font-bold mb-2">Educação</h2>
       <div className="flex flex-col gap-3">
         {educacao.map((formacao) => (

src/components/form/preview/PreviewExperiencias.tsx

@@ -7,7 +7,7 @@ export function PreviewExperiencias() {
   if (experiencia.length === 0) return null;
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4">
       <h2 className="text-xl font-bold mb-2">Experiências</h2>
       <div className="flex flex-col gap-3">
         {experiencia.map((exp) => (

src/components/form/preview/PreviewExtraContacts.tsx

@@ -7,7 +7,7 @@ export const PreviewExtraContacts: React.FC = () => {
   if (extraContacts.length === 0) return null;
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4">
       <h2 className="text-lg font-bold mb-2">Contatos Adicionais</h2>
       <div className="flex flex-col gap-1 text-gray-700 text-sm">
         {extraContacts.map((contact) => {

src/components/form/preview/PreviewHabilidades.tsx

@@ -7,7 +7,7 @@ export function PreviewHabilidades() {
   if (habilidades.length === 0) return null;
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4">
       <h2 className="text-xl font-bold mb-2">Habilidades</h2>
       <ul className="text-gray-700 text-sm flex flex-col gap-1">
         {habilidades.map((hab) => (

src/components/form/preview/PreviewHeader.tsx

@@ -5,7 +5,7 @@ export function PreviewHeader() {
   const { personalData } = useResume();
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4">
       <h2 className="text-xl font-bold mb-2">Dados Pessoais</h2>
       <p className="text-lg font-semibold">
         {personalData.useSocialName && personalData.socialName

src/components/form/preview/PreviewResumo.tsx

@@ -7,12 +7,9 @@ export const PreviewResumo: React.FC = () => {
   if (!personalData.summary) return null;
 
   return (
-    <div className="p-4 border rounded bg-gray-50 mb-4">
+    <div className="p-4 mb-4 border-b border-gray-200">
       <h2 className="text-lg font-bold mb-2">Resumo Profissional</h2>
-      <p className="text-gray-700 text-sm">{personalData.summary}</p>
-      <p className="text-gray-400 text-xs mt-1">
-        {personalData.summary.length} / 500 caracteres
-      </p>
+      <p className="text-gray-700 text-sm  mb-4">{personalData.summary}</p>
     </div>
   );
 };

src/pages/Home.tsx

@@ -1,10 +1,10 @@
-import React from "react";
 import { DadosPessoais } from "../components/form/DadosPessoais";
 import { Educacao } from "../components/form/educacao/Educacao";
 import { Experiencias } from "../components/form/experiencias/Experiencias";
 import { Habilidades } from "../components/form/habilidades/Habilidades";
 import { Preview } from "../components/form/preview/Preview";
 import { ResumeProvider } from "../context/CurriculoContext";
+import { PdfExporter } from "../components/ExportPdf/PdfExportButton";
 
 export const Home = () => {
   return (
@@ -23,6 +23,7 @@ export const Home = () => {
           <div className="p-6 overflow-y-auto bg-gray-100">
             <h2 className="text-xl font-bold mb-4">Preview</h2>
             <Preview />
+            <PdfExporter />
           </div>
         </div>
       </div>