- implement celebi template

src/templates/Castform.js

@@ -64,7 +64,7 @@ const Castform = ({ data }) => {
       >
         <div className="grid grid-cols-12">
           <div
-            className="col-span-4 p-5"
+            className="col-span-4 py-8 pr-8 pl-5"
             style={{
               color: data.metadata.colors.background,
               backgroundColor: data.metadata.colors.primary,
@@ -86,7 +86,7 @@ const Castform = ({ data }) => {
                 })}
             </div>
           </div>
-          <div className="col-span-8 p-5">
+          <div className="col-span-8 py-8 pr-8 pl-5">
             <div className="grid gap-4">
               {layout[1] &&
                 layout[1].map((x) => {

src/templates/Celebi.js

@@ -0,0 +1,126 @@
+import React from 'react';
+import PageContext from '../contexts/PageContext';
+import { hexToRgb } from '../utils';
+import AwardsA from './blocks/Awards/AwardsA';
+import CertificationsA from './blocks/Certifications/CertificationsA';
+import ContactE from './blocks/Contact/ContactE';
+import EducationA from './blocks/Education/EducationA';
+import HeadingE from './blocks/Heading/HeadingE';
+import HobbiesA from './blocks/Hobbies/HobbiesA';
+import LanguagesB from './blocks/Languages/LanguagesB';
+import ObjectiveA from './blocks/Objective/ObjectiveA';
+import ProjectsA from './blocks/Projects/ProjectsA';
+import ReferencesA from './blocks/References/ReferencesA';
+import SkillsA from './blocks/Skills/SkillsA';
+import WorkA from './blocks/Work/WorkA';
+
+const Blocks = {
+  objective: ObjectiveA,
+  work: WorkA,
+  education: EducationA,
+  projects: ProjectsA,
+  awards: AwardsA,
+  certifications: CertificationsA,
+  skills: SkillsA,
+  hobbies: HobbiesA,
+  languages: LanguagesB,
+  references: ReferencesA,
+};
+
+const Celebi = ({ data }) => {
+  const layout = data.metadata.layout.celebi;
+  const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+
+  const styles = {
+    header: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      color: data.metadata.colors.background,
+      backgroundColor: data.metadata.colors.text,
+      height: '160px',
+      paddingLeft: '275px',
+    },
+    leftSection: {
+      backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
+    },
+    rightSection: {
+      top: '160px',
+    },
+  };
+
+  const Photo = () =>
+    data.profile.photograph !== '' && (
+      <div className="relative z-40">
+        <img
+          className="w-full object-cover object-center"
+          src={data.profile.photograph}
+          alt={data.profile.firstName}
+          style={{
+            height: '160px',
+          }}
+        />
+      </div>
+    );
+
+  const Profile = () => (
+    <div style={styles.header}>
+      <h1
+        className="tracking-wide uppercase font-bold"
+        style={{ fontSize: '2.75em' }}
+      >
+        {data.profile.firstName} {data.profile.lastName}
+      </h1>
+      <h6 className="text-lg tracking-wider uppercase">
+        {data.profile.subtitle}
+      </h6>
+    </div>
+  );
+
+  return (
+    <PageContext.Provider value={{ data, heading: HeadingE }}>
+      <div
+        id="page"
+        className="relative rounded"
+        style={{
+          fontFamily: data.metadata.font,
+          color: data.metadata.colors.text,
+          backgroundColor: data.metadata.colors.background,
+        }}
+      >
+        <div className="grid grid-cols-12 gap-8">
+          <div className="col-span-4 ml-8" style={styles.leftSection}>
+            <Photo />
+            <div className="text-center grid gap-4 mt-4 mb-8 mx-6">
+              <ContactE />
+
+              {layout[0] &&
+                layout[0].map((x) => {
+                  const Component = Blocks[x];
+                  return Component && <Component key={x} />;
+                })}
+            </div>
+          </div>
+          <div className="col-span-8">
+            <Profile />
+
+            <div className="relative" style={styles.rightSection}>
+              <div className="grid gap-4 mt-4 mb-8 mr-8">
+                {layout[1] &&
+                  layout[1].map((x) => {
+                    const Component = Blocks[x];
+                    return Component && <Component key={x} />;
+                  })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </PageContext.Provider>
+  );
+};
+
+export default Celebi;

src/templates/Glalie.js

@@ -68,7 +68,7 @@ const Glalie = ({ data }) => {
               backgroundColor: `rgba(${r}, ${g}, ${b}, 0.1)`,
             }}
           >
-            <div className="grid gap-6 p-6">
+            <div className="grid gap-6 text-center p-8">
               <Profile />
               <ContactD />
 
@@ -81,7 +81,7 @@ const Glalie = ({ data }) => {
           </div>
 
           <div className="col-span-8">
-            <div className="grid gap-4 p-6">
+            <div className="grid gap-4 p-8">
               {layout[1] &&
                 layout[1].map((x) => {
                   const Component = Blocks[x];

src/templates/Pikachu.js

@@ -32,14 +32,14 @@ const Pikachu = ({ data }) => {
     <PageContext.Provider value={{ data, heading: HeadingB }}>
       <div
         id="page"
-        className="p-6 rounded"
+        className="p-8 rounded"
         style={{
           fontFamily: data.metadata.font,
           color: data.metadata.colors.text,
           backgroundColor: data.metadata.colors.background,
         }}
       >
-        <div className="grid grid-cols-12 col-gap-6 row-gap-8">
+        <div className="grid grid-cols-12 gap-8">
           {data.profile.photograph && (
             <div className="self-center col-span-4">
               <img

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>