- implement celebi template

src/templates/blocks/Awards/AwardsA.js

@@ -7,7 +7,7 @@ import { safetyCheck } from '../../../utils';
 const AwardItem = (x) => (
   <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div className="flex flex-col">
+      <div className="flex flex-col text-left mr-2">
         <h6 className="font-semibold">{x.title}</h6>
         <span className="text-xs">{x.awarder}</span>
       </div>

src/templates/blocks/Certifications/CertificationsA.js

@@ -7,7 +7,7 @@ import { safetyCheck } from '../../../utils';
 const CertificationItem = (x) => (
   <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div className="flex flex-col">
+      <div className="flex flex-col text-left mr-2">
         <h6 className="font-semibold">{x.title}</h6>
         <span className="text-xs">{x.issuer}</span>
       </div>

src/templates/blocks/Contact/ContactD.js

@@ -18,7 +18,7 @@ const ContactItem = ({ value, label, link }) => {
   ) : null;
 };
 
-const ContactC = () => {
+const ContactD = () => {
   const { data } = useContext(PageContext);
 
   return (
@@ -80,4 +80,4 @@ const ContactC = () => {
   );
 };
 
-export default memo(ContactC);
+export default memo(ContactD);

src/templates/blocks/Contact/ContactE.js

@@ -0,0 +1,68 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const ContactItem = ({ value, label, link }) => {
+  return value ? (
+    <div className="flex flex-col">
+      <h6 className="capitalize font-semibold">{label}</h6>
+      {link ? (
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <span className="font-medium break-all">{value}</span>
+        </a>
+      ) : (
+        <span className="font-medium break-all">{value}</span>
+      )}
+    </div>
+  ) : null;
+};
+
+const ContactE = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return (
+    <div>
+      <Heading>Profile</Heading>
+      <div className="relative w-full grid gap-2 text-xs">
+        <div>
+          <h6 className="capitalize font-semibold">Address</h6>
+          <div className="flex flex-col text-xs">
+            <span>{data.profile.address.line1}</span>
+            <span>{data.profile.address.line2}</span>
+            <span>
+              {data.profile.address.city} {data.profile.address.pincode}
+            </span>
+          </div>
+        </div>
+
+        <ContactItem
+          label="phone"
+          value={data.profile.phone}
+          link={`tel:${data.profile.phone}`}
+        />
+        <ContactItem
+          label="website"
+          value={data.profile.website}
+          link={`http://${data.profile.website}`}
+        />
+        <ContactItem
+          label="email"
+          value={data.profile.email}
+          link={`mailto:${data.profile.email}`}
+        />
+
+        {safetyCheck(data.social) &&
+          data.social.items.map((x) => (
+            <ContactItem
+              key={x.id}
+              value={x.username}
+              label={x.network}
+              link={x.url}
+            />
+          ))}
+      </div>
+    </div>
+  );
+};
+
+export default memo(ContactE);

src/templates/blocks/Education/EducationA.js

@@ -6,7 +6,7 @@ import { formatDateRange, safetyCheck } from '../../../utils';
 const EducationItem = (x) => (
   <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div className="flex flex-col">
+      <div className="flex flex-col text-left mr-2">
         <h6 className="font-semibold">{x.institution}</h6>
         <span className="text-xs">
           <strong>{x.degree}</strong> {x.field}

src/templates/blocks/Heading/HeadingE.js

@@ -0,0 +1,11 @@
+import React, { memo } from 'react';
+
+const HeadingC = ({ children }) => {
+  return (
+    <h6 className="my-2 text-md uppercase font-semibold tracking-wider pb-1 border-b-2 border-gray-800">
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingC);

src/templates/blocks/Languages/LanguagesB.js

@@ -0,0 +1,23 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { safetyCheck } from '../../../utils';
+
+const LanguageItem = (x) => (
+  <div key={x.id} className="flex flex-col">
+    <h6 className="font-semibold">{x.name}</h6>
+    <span className="text-xs">{x.fluency}</span>
+  </div>
+);
+
+const LanguagesB = () => {
+  const { data, heading: Heading } = useContext(PageContext);
+
+  return safetyCheck(data.languages) ? (
+    <div>
+      <Heading>{data.languages.heading}</Heading>
+      <div className="grid gap-2">{data.languages.items.map(LanguageItem)}</div>
+    </div>
+  ) : null;
+};
+
+export default memo(LanguagesB);

src/templates/blocks/Projects/ProjectsA.js

@@ -7,7 +7,7 @@ import { safetyCheck } from '../../../utils';
 const ProjectItem = (x) => (
   <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div className="flex flex-col">
+      <div className="flex flex-col text-left mr-2">
         <h6 className="font-semibold">{x.title}</h6>
         {x.link && (
           <a href={x.link} className="text-xs">

src/templates/blocks/Work/WorkA.js

@@ -6,7 +6,7 @@ import { formatDateRange, safetyCheck } from '../../../utils';
 const WorkItem = (x) => (
   <div key={x.id}>
     <div className="flex justify-between items-center">
-      <div className="flex flex-col">
+      <div className="flex flex-col text-left mr-2">
         <h6 className="font-semibold">{x.company}</h6>
         <span className="text-xs">{x.position}</span>
       </div>