introduce print dialog to add more options in exporting resume

src/templates/castform/Castform.js

@@ -78,7 +78,7 @@ const Castform = () => {
     </div>
   );
 
-  const SkillItem = x => (
+  const SkillItem = (x) => (
     <li key={x} className="text-sm my-2">
       {x}
     </li>
@@ -96,7 +96,7 @@ const Castform = () => {
   const Objective = () =>
     data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
 
-  const WorkItem = x => (
+  const WorkItem = (x) => (
     <div key={x.title} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
@@ -116,11 +116,11 @@ const Castform = () => {
     data.work.enable && (
       <div>
         <Heading light title={data.work.heading} />
-        {data.work.items.filter(x => x.enable).map(WorkItem)}
+        {data.work.items.filter((x) => x.enable).map(WorkItem)}
       </div>
     );
 
-  const ReferenceItem = x => (
+  const ReferenceItem = (x) => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
       <span className="text-xs">{x.position}</span>
@@ -136,12 +136,12 @@ const Castform = () => {
       <div>
         <Heading light title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6 px-5">
-          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const LanguageItem = x => (
+  const LanguageItem = (x) => (
     <div key={x.id} className="flex flex-col my-2">
       <h6 className="text-sm font-medium mb-1">{x.key}</h6>
       <div className="relative h-5">
@@ -168,12 +168,12 @@ const Castform = () => {
       <div>
         <Heading title={data.languages.heading} />
         <div className="px-5 mb-6">
-          {data.languages.items.filter(x => x.enable).map(LanguageItem)}
+          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
         </div>
       </div>
     );
 
-  const EducationItem = x => (
+  const EducationItem = (x) => (
     <div key={x.name} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
@@ -196,11 +196,11 @@ const Castform = () => {
     data.education.enable && (
       <div>
         <Heading light title={data.education.heading} />
-        {data.education.items.filter(x => x.enable).map(EducationItem)}
+        {data.education.items.filter((x) => x.enable).map(EducationItem)}
       </div>
     );
 
-  const AwardItem = x => (
+  const AwardItem = (x) => (
     <div key={x.title} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -213,11 +213,11 @@ const Castform = () => {
     data.awards.enable && (
       <div>
         <Heading light title={data.awards.heading} />
-        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = x => (
+  const CertificationItem = (x) => (
     <div key={x.title} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -230,11 +230,11 @@ const Castform = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const ExtraItem = x => (
+  const ExtraItem = (x) => (
     <div key={x.id} className="px-5 my-2">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <div className="text-sm">{x.value}</div>
@@ -246,7 +246,7 @@ const Castform = () => {
     data.extras.enable && (
       <div>
         <Heading title={data.extras.heading} />
-        {data.extras.items.filter(x => x.enable).map(ExtraItem)}
+        {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
       </div>
     );
 
@@ -260,7 +260,7 @@ const Castform = () => {
     >
       <div className="grid grid-cols-12">
         <div
-          className="col-span-4 rounded"
+          className="col-span-4"
           style={{
             color: theme.colors.background,
             backgroundColor: theme.colors.accent,

src/templates/gengar/Gengar.js

@@ -63,7 +63,7 @@ const Gengar = () => {
       </div>
     );
 
-  const SkillItem = x => (
+  const SkillItem = (x) => (
     <li key={x} className="text-sm py-1">
       {x}
     </li>
@@ -78,7 +78,7 @@ const Gengar = () => {
       </div>
     );
 
-  const EducationItem = x => (
+  const EducationItem = (x) => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
@@ -109,11 +109,11 @@ const Gengar = () => {
     data.education.enable && (
       <div className="mb-6">
         <Heading title={data.education.heading} />
-        {data.education.items.filter(x => x.enable).map(EducationItem)}
+        {data.education.items.filter((x) => x.enable).map(EducationItem)}
       </div>
     );
 
-  const CertificationItem = x => (
+  const CertificationItem = (x) => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -126,11 +126,11 @@ const Gengar = () => {
     data.certifications.enable && (
       <div className="mb-6">
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const AwardItem = x => (
+  const AwardItem = (x) => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -143,11 +143,11 @@ const Gengar = () => {
     data.awards.enable && (
       <div className="mb-6">
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
       </div>
     );
 
-  const ReferenceItem = x => (
+  const ReferenceItem = (x) => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
       <span className="text-xs">{x.position}</span>
@@ -163,12 +163,12 @@ const Gengar = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6">
-          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const WorkItem = x => (
+  const WorkItem = (x) => (
     <div key={x.title} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
@@ -188,11 +188,11 @@ const Gengar = () => {
     data.work.enable && (
       <div className="mb-6">
         <Heading title={data.work.heading} />
-        {data.work.items.filter(x => x.enable).map(WorkItem)}
+        {data.work.items.filter((x) => x.enable).map(WorkItem)}
       </div>
     );
 
-  const LanguageItem = x => (
+  const LanguageItem = (x) => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -210,11 +210,11 @@ const Gengar = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
+        <div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ExtraItem = x => (
+  const ExtraItem = (x) => (
     <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6>{x.value}</h6>
@@ -227,7 +227,7 @@ const Gengar = () => {
       <div>
         <Heading title={data.extras.heading} />
         <div className="grid grid-cols-2">
-          {data.extras.items.filter(x => x.enable).map(ExtraItem)}
+          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
         </div>
       </div>
     );

src/templates/glalie/Glalie.js

@@ -95,7 +95,7 @@ const Glalie = () => {
       </div>
     );
 
-  const WorkItem = x => (
+  const WorkItem = (x) => (
     <div key={x.title} className="mt-3">
       <div className="flex justify-between">
         <div>
@@ -114,11 +114,11 @@ const Glalie = () => {
     data.work.enable && (
       <div>
         <Heading title={data.work.heading} />
-        {data.work.items.filter(x => x.enable).map(WorkItem)}
+        {data.work.items.filter((x) => x.enable).map(WorkItem)}
       </div>
     );
 
-  const EducationItem = x => (
+  const EducationItem = (x) => (
     <div key={x.name} className="mt-3">
       <div>
         <h6 className="font-semibold text-xs">{x.name}</h6>
@@ -137,12 +137,12 @@ const Glalie = () => {
       <div>
         <Heading title={data.education.heading} />
         <div className="grid grid-cols-2 gap-4">
-          {data.education.items.filter(x => x.enable).map(EducationItem)}
+          {data.education.items.filter((x) => x.enable).map(EducationItem)}
         </div>
       </div>
     );
 
-  const AwardItem = x => (
+  const AwardItem = (x) => (
     <div key={x.title} className="mt-3 text-left">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -155,11 +155,11 @@ const Glalie = () => {
     data.awards.enable && (
       <div>
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = x => (
+  const CertificationItem = (x) => (
     <div key={x.title} className="mt-3 text-left">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -172,11 +172,11 @@ const Glalie = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const SkillItem = x => (
+  const SkillItem = (x) => (
     <li key={x} className="text-xs font-medium">
       {x}
     </li>
@@ -191,7 +191,7 @@ const Glalie = () => {
       </div>
     );
 
-  const LanguageItem = x => (
+  const LanguageItem = (x) => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-xs font-medium text-left">{x.key}</h6>
       <div className="flex">
@@ -209,11 +209,13 @@ const Glalie = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
+        <div className="w-3/4">
+          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+        </div>
       </div>
     );
 
-  const ReferenceItem = x => (
+  const ReferenceItem = (x) => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
       <span className="text-xs">{x.position}</span>
@@ -229,12 +231,12 @@ const Glalie = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-3 gap-8">
-          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const ExtraItem = x => (
+  const ExtraItem = (x) => (
     <tr key={x.id}>
       <td className="border font-medium px-4 py-2 text-xs">{x.key}</td>
       <td className="border px-4 py-2 text-xs">{x.value}</td>
@@ -247,7 +249,7 @@ const Glalie = () => {
       <div>
         <Heading title={data.extras.heading} />
         <table className="mt-4 w-2/3 table-auto">
-          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
+          <tbody>{data.extras.items.filter((x) => x.enable).map(ExtraItem)}</tbody>
         </table>
       </div>
     );

src/templates/onyx/Onyx.js

@@ -60,7 +60,7 @@ const Onyx = () => {
       </div>
     );
 
-  const WorkItem = x => (
+  const WorkItem = (x) => (
     <div key={x.title} className="mt-3">
       <div className="flex justify-between">
         <div>
@@ -80,11 +80,11 @@ const Onyx = () => {
     data.work.enable && (
       <div>
         <Heading title={data.work.heading} />
-        {data.work.items.filter(x => x.enable).map(WorkItem)}
+        {data.work.items.filter((x) => x.enable).map(WorkItem)}
       </div>
     );
 
-  const EducationItem = x => (
+  const EducationItem = (x) => (
     <div key={x.name} className="mt-3">
       <div className="flex justify-between">
         <div>
@@ -107,11 +107,11 @@ const Onyx = () => {
     data.education.enable && (
       <div>
         <Heading title={data.education.heading} />
-        {data.education.items.filter(x => x.enable).map(EducationItem)}
+        {data.education.items.filter((x) => x.enable).map(EducationItem)}
       </div>
     );
 
-  const AwardItem = x => (
+  const AwardItem = (x) => (
     <div key={x.title} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -124,11 +124,11 @@ const Onyx = () => {
     data.awards.enable && (
       <div>
         <Heading title={data.awards.heading} />
-        {data.awards.items.filter(x => x.enable).map(AwardItem)}
+        {data.awards.items.filter((x) => x.enable).map(AwardItem)}
       </div>
     );
 
-  const CertificationItem = x => (
+  const CertificationItem = (x) => (
     <div key={x.title} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -141,11 +141,11 @@ const Onyx = () => {
     data.certifications.enable && (
       <div>
         <Heading title={data.certifications.heading} />
-        {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+        {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
       </div>
     );
 
-  const SkillItem = x => (
+  const SkillItem = (x) => (
     <span
       key={x}
       className="text-xs rounded-full px-3 py-1 font-medium my-2 mr-2"
@@ -167,7 +167,7 @@ const Onyx = () => {
       </div>
     );
 
-  const LanguageItem = x => (
+  const LanguageItem = (x) => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -185,11 +185,13 @@ const Onyx = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="w-3/4">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
+        <div className="w-3/4">
+          {data.languages.items.filter((x) => x.enable).map(LanguageItem)}
+        </div>
       </div>
     );
 
-  const ReferenceItem = x => (
+  const ReferenceItem = (x) => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
       <span className="text-xs">{x.position}</span>
@@ -205,12 +207,12 @@ const Onyx = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-3 gap-6">
-          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const ExtraItem = x => (
+  const ExtraItem = (x) => (
     <tr key={x.id}>
       <td className="border font-medium px-4 py-2 text-sm">{x.key}</td>
       <td className="border px-4 py-2 text-sm">{x.value}</td>
@@ -223,7 +225,7 @@ const Onyx = () => {
       <div>
         <Heading title={data.extras.heading} />
         <table className="w-2/3 table-auto">
-          <tbody>{data.extras.items.filter(x => x.enable).map(ExtraItem)}</tbody>
+          <tbody>{data.extras.items.filter((x) => x.enable).map(ExtraItem)}</tbody>
         </table>
       </div>
     );

src/templates/pikachu/Pikachu.js

@@ -58,7 +58,7 @@ const Pikachu = () => {
     </div>
   );
 
-  const SkillItem = x => (
+  const SkillItem = (x) => (
     <span
       key={x}
       className="leading-none rounded-lg text-sm font-medium bg-gray-300 py-3 my-1 px-4"
@@ -76,7 +76,7 @@ const Pikachu = () => {
       </div>
     );
 
-  const ReferenceItem = x => (
+  const ReferenceItem = (x) => (
     <div key={x.id} className="flex flex-col">
       <h6 className="text-sm font-medium">{x.name}</h6>
       <span className="text-xs">{x.position}</span>
@@ -92,12 +92,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.references.heading} />
         <div className="grid grid-cols-2 gap-6">
-          {data.references.items.filter(x => x.enable).map(ReferenceItem)}
+          {data.references.items.filter((x) => x.enable).map(ReferenceItem)}
         </div>
       </div>
     );
 
-  const LanguageItem = x => (
+  const LanguageItem = (x) => (
     <div key={x.id} className="grid grid-cols-2 items-center py-2">
       <h6 className="text-sm font-medium">{x.key}</h6>
       <div className="flex">
@@ -115,11 +115,11 @@ const Pikachu = () => {
     data.languages.enable && (
       <div>
         <Heading title={data.languages.heading} />
-        <div className="mb-6">{data.languages.items.filter(x => x.enable).map(LanguageItem)}</div>
+        <div className="mb-6">{data.languages.items.filter((x) => x.enable).map(LanguageItem)}</div>
       </div>
     );
 
-  const ExtraItem = x => (
+  const ExtraItem = (x) => (
     <div key={x.id} className="text-sm my-1">
       <h6 className="text-xs font-bold">{x.key}</h6>
       <h6 className="">{x.value}</h6>
@@ -132,12 +132,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.extras.heading} />
         <div className="flex flex-col mb-6">
-          {data.extras.items.filter(x => x.enable).map(ExtraItem)}
+          {data.extras.items.filter((x) => x.enable).map(ExtraItem)}
         </div>
       </div>
     );
 
-  const WorkItem = x => (
+  const WorkItem = (x) => (
     <div key={x.title} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
@@ -158,12 +158,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.work.heading} />
         <div className="flex flex-col mb-4">
-          {data.work.items.filter(x => x.enable).map(WorkItem)}
+          {data.work.items.filter((x) => x.enable).map(WorkItem)}
         </div>
       </div>
     );
 
-  const EducationItem = x => (
+  const EducationItem = (x) => (
     <div key={x.name} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
@@ -189,12 +189,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.education.heading} />
         <div className="flex flex-col mb-4">
-          {data.education.items.filter(x => x.enable).map(EducationItem)}
+          {data.education.items.filter((x) => x.enable).map(EducationItem)}
         </div>
       </div>
     );
 
-  const AwardItem = x => (
+  const AwardItem = (x) => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -208,12 +208,12 @@ const Pikachu = () => {
       <div>
         <Heading title={data.awards.heading} />
         <div className="flex flex-col mb-2">
-          {data.awards.items.filter(x => x.enable).map(AwardItem)}
+          {data.awards.items.filter((x) => x.enable).map(AwardItem)}
         </div>
       </div>
     );
 
-  const CertificationItem = x => (
+  const CertificationItem = (x) => (
     <div key={x.title} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
@@ -227,7 +227,7 @@ const Pikachu = () => {
       <div>
         <Heading title={data.certifications.heading} />
         <div className="flex flex-col mb-2">
-          {data.certifications.items.filter(x => x.enable).map(CertificationItem)}
+          {data.certifications.items.filter((x) => x.enable).map(CertificationItem)}
         </div>
       </div>
     );