bring back browser print method, parse-able resumes

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,8 +96,8 @@ const Castform = () => {
   const Objective = () =>
     data.objective && data.objective.enable && <p className="m-5 text-sm">{data.objective.body}</p>;
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="my-3 px-5">
+  const WorkItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -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,13 +168,13 @@ 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) => (
-    <div key={x.name} className="my-3 px-5">
+  const EducationItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -196,12 +196,12 @@ 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) => (
-    <div key={x.title} className="my-3 px-5">
+  const AwardItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -213,12 +213,12 @@ 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) => (
-    <div key={x.title} className="my-3 px-5">
+  const CertificationItem = x => (
+    <div key={x.id} className="my-3 px-5">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -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>
     );
 

src/templates/celebi/Celebi.js

@@ -98,7 +98,7 @@ const Celebi = () => {
   );
 
   const WorkItem = x => (
-    <div key={x.title} className="my-3 mr-10">
+    <div key={x.id} className="my-3 mr-10">
       <div>
         <h6 className="font-semibold">{x.title}</h6>
         <p className="text-xs text-gray-800">
@@ -119,7 +119,7 @@ const Celebi = () => {
     );
 
   const EducationItem = x => (
-    <div key={x.name} className="my-3 mr-10">
+    <div key={x.id} className="my-3 mr-10">
       <h6 className="font-semibold">{x.name}</h6>
       <p className="text-xs">{x.major}</p>
       <div className="text-xs">
@@ -196,7 +196,7 @@ const Celebi = () => {
     );
 
   const AwardItem = x => (
-    <div key={x.title} className="my-2">
+    <div key={x.id} className="my-2">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -213,7 +213,7 @@ const Celebi = () => {
     );
 
   const CertificationItem = x => (
-    <div key={x.title} className="my-2">
+    <div key={x.id} className="my-2">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />

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,8 +78,8 @@ const Gengar = () => {
       </div>
     );
 
-  const EducationItem = (x) => (
-    <div key={x.name} className="mb-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">
@@ -109,12 +109,12 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -126,12 +126,12 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -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,13 +163,13 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -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,8 +95,8 @@ const Glalie = () => {
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold text-sm">{x.title}</h6>
@@ -114,12 +114,12 @@ 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) => (
-    <div key={x.name} className="mt-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mt-3">
       <div>
         <h6 className="font-semibold text-xs">{x.name}</h6>
         <p className="text-xs opacity-75">{x.major}</p>
@@ -137,13 +137,13 @@ 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) => (
-    <div key={x.title} className="mt-3 text-left">
+  const AwardItem = x => (
+    <div key={x.id} className="mt-3 text-left">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -155,12 +155,12 @@ 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) => (
-    <div key={x.title} className="mt-3 text-left">
+  const CertificationItem = x => (
+    <div key={x.id} className="mt-3 text-left">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -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,13 +209,11 @@ 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>
@@ -231,12 +229,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>
@@ -249,7 +247,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,8 +60,8 @@ const Onyx = () => {
       </div>
     );
 
-  const WorkItem = (x) => (
-    <div key={x.title} className="mt-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -80,12 +80,12 @@ 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) => (
-    <div key={x.name} className="mt-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mt-3">
       <div className="flex justify-between">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -107,12 +107,12 @@ 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) => (
-    <div key={x.title} className="mt-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -124,12 +124,12 @@ 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) => (
-    <div key={x.title} className="mt-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mt-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -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,13 +185,11 @@ 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>
@@ -207,12 +205,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>
@@ -225,7 +223,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,13 +132,13 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const WorkItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.title}</h6>
@@ -158,13 +158,13 @@ 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) => (
-    <div key={x.name} className="mb-3">
+  const EducationItem = x => (
+    <div key={x.id} className="mb-3">
       <div className="flex justify-between items-center">
         <div>
           <h6 className="font-semibold">{x.name}</h6>
@@ -189,13 +189,13 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const AwardItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -208,13 +208,13 @@ 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) => (
-    <div key={x.title} className="mb-3">
+  const CertificationItem = x => (
+    <div key={x.id} className="mb-3">
       <h6 className="font-semibold">{x.title}</h6>
       <p className="text-xs">{x.subtitle}</p>
       <ReactMarkdown className="mt-2 text-sm" source={x.description} />
@@ -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>
     );