- implement glalie template

src/templates/blocks/Contact/ContactC.js

@@ -0,0 +1,65 @@
+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 ContactC = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div className="text-xs grid gap-2">
+      <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>
+  );
+};
+
+export default memo(ContactC);

src/templates/blocks/Contact/ContactD.js

@@ -0,0 +1,83 @@
+import React, { memo, useContext } from 'react';
+import { MdFlare } from 'react-icons/md';
+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 ContactC = () => {
+  const { data } = useContext(PageContext);
+
+  return (
+    <div
+      className="my-4 relative w-full border-2 grid gap-2 text-center text-xs py-5"
+      style={{
+        borderColor: data.metadata.colors.primary,
+      }}
+    >
+      <div
+        className="absolute text-center"
+        style={{
+          top: '-11px',
+          left: '50%',
+          marginLeft: '-10px',
+          color: data.metadata.colors.primary,
+        }}
+      >
+        <MdFlare size="20px" />
+      </div>
+
+      <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>
+  );
+};
+
+export default memo(ContactC);

src/templates/blocks/Heading/HeadingD.js

@@ -0,0 +1,23 @@
+import React, { memo, useContext } from 'react';
+import PageContext from '../../../contexts/PageContext';
+import { hexToRgb } from '../../../utils';
+
+const HeadingC = ({ children }) => {
+  const { data } = useContext(PageContext);
+  const { r, g, b } = hexToRgb(data.metadata.colors.primary) || {};
+
+  return (
+    <h6
+      className="py-1 px-4 rounded-r leading-loose font-bold text-xs uppercase tracking-wide mb-3"
+      style={{
+        marginLeft: '-15px',
+        color: data.metadata.colors.background,
+        backgroundColor: `rgba(${r - 40}, ${g - 40}, ${b - 40}, 0.8)`,
+      }}
+    >
+      {children}
+    </h6>
+  );
+};
+
+export default memo(HeadingC);