Feature/add footer

package.json

@@ -5,9 +5,11 @@
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start"
+    "start": "next start",
+	"svg": "svgr -d src/components/icons src/components/icons/svgs"
   },
   "dependencies": {
+    "@svgr/cli": "^5.5.0",
     "axios": "^0.21.1",
     "dompurify": "^2.3.1",
     "lodash": "^4.17.21",

pages/index.js

@@ -12,6 +12,7 @@ import axios from 'axios';
 
 export default function Home({data}) {
 	const { header, footer } = data;
+
 	return (
 		<div >
 			<Header header={header}/>

src/components/icons/Bag.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function SvgBag(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      width={18}
+      height="auto"
+      stroke="currentColor"
+      {...props}
+    >
+      <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
+    </svg>
+  );
+}
+
+export default SvgBag;

src/components/icons/BurgerIcon.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+function SvgBurgerIcon(props) {
+  return (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
+    </svg>
+  );
+}
+
+export default SvgBurgerIcon;

src/components/icons/Facebook.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+function SvgFacebook(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 18 18"
+      {...props}
+    >
+      <path
+        d="M2.637 18h5.87v-6.398H6.399v-2.11h2.11V6.855a2.64 2.64 0 012.637-2.636h2.636v2.11h-2.11c-.581 0-1.054.472-1.054 1.054v2.11h3.07l-.351 2.109h-2.719V18h4.746A2.64 2.64 0 0018 15.363V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v12.726A2.64 2.64 0 002.637 18zM1.055 2.637c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v12.726c0 .871-.71 1.582-1.582 1.582h-3.691v-4.289h2.555l.703-4.219h-3.258V7.383h3.164V3.164h-3.691a3.696 3.696 0 00-3.692 3.691v1.582h-2.11v4.22h2.11v4.288H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0"
+        fill="#fff"
+      />
+    </svg>
+  );
+}
+
+export default SvgFacebook;

src/components/icons/Instagram.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+function SvgInstagram(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 18 18"
+      {...props}
+    >
+      <g fill="#fff">
+        <path d="M2.637 18h12.726A2.64 2.64 0 0018 15.363V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v12.726A2.64 2.64 0 002.637 18zM1.055 2.637c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v12.726c0 .871-.71 1.582-1.582 1.582H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0" />
+        <path d="M9 13.746A4.751 4.751 0 0013.746 9 4.751 4.751 0 009 4.254 4.751 4.751 0 004.254 9 4.751 4.751 0 009 13.746zM9 5.31A3.696 3.696 0 0112.691 9 3.696 3.696 0 019 12.691 3.696 3.696 0 015.309 9 3.696 3.696 0 019 5.309zm0 0M14.273 5.309c.872 0 1.582-.711 1.582-1.582 0-.872-.71-1.582-1.582-1.582-.87 0-1.582.71-1.582 1.582 0 .87.711 1.582 1.582 1.582zm0-2.11a.53.53 0 01.528.528.53.53 0 01-.528.527.53.53 0 01-.527-.527.53.53 0 01.527-.528zm0 0" />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgInstagram;

src/components/icons/SearchIcon.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+function SvgSearchIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" {...props}>
+      <path d="M10 4a6 6 0 100 12 6 6 0 000-12zm-8 6a8 8 0 1114.32 4.906l5.387 5.387a1 1 0 01-1.414 1.414l-5.387-5.387A8 8 0 012 10z" />
+    </svg>
+  );
+}
+
+export default SvgSearchIcon;

src/components/icons/TailwindIcon.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+function SvgTailwindIcon(props) {
+  return (
+    <svg
+      className="tailwind-icon_svg__fill-current tailwind-icon_svg__h-8 tailwind-icon_svg__w-8 tailwind-icon_svg__mr-2"
+      width={54}
+      height={54}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z" />
+    </svg>
+  );
+}
+
+export default SvgTailwindIcon;

src/components/icons/Twitter.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+function SvgTwitter(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 18 18"
+      {...props}
+    >
+      <path
+        d="M18 1.969c-1.133.05-1.11.047-1.234.058L17.434.11s-2.09.774-2.622.91C13.418-.233 11.348-.288 9.864.622 8.653 1.367 8 2.648 8.22 4.145 5.859 3.816 3.87 2.695 2.3.813L1.805.215l-.371.68a4.142 4.142 0 00-.442 2.773c.078.379.207.742.387 1.082l-.426-.164-.05.71c-.051.724.19 1.567.644 2.259.129.195.293.406.5.617l-.219-.031.27.816a3.957 3.957 0 002.039 2.36c-.953.402-1.719.66-2.98 1.074L0 12.773l1.066.582c.407.223 1.844.965 3.262 1.188 3.156.496 6.711.09 9.102-2.063 2.015-1.816 2.675-4.394 2.539-7.082-.02-.406.09-.793.312-1.093.45-.594 1.715-2.332 1.719-2.336zm-2.559 1.707a2.712 2.712 0 00-.523 1.777c.137 2.707-.602 4.809-2.191 6.246-1.864 1.672-4.864 2.332-8.235 1.801-.61-.094-1.242-.309-1.762-.523 1.06-.364 1.875-.688 3.196-1.313l1.84-.871-2.036-.129c-.972-.062-1.785-.535-2.28-1.305.265-.011.519-.054.773-.129l1.941-.539-1.957-.48a2.915 2.915 0 01-2.164-2.086c.195.05.422.09.793.125l1.809.18L3.21 5.313c-1.035-.81-1.45-2.02-1.145-3.184 3.227 3.348 7.012 3.094 7.395 3.183-.086-.816-.086-.816-.11-.894-.488-1.727.583-2.602 1.067-2.898 1.008-.622 2.605-.715 3.715.308a.95.95 0 00.867.23c.27-.066.496-.14.71-.218l-.452 1.3h.582c-.11.15-.242.325-.399.536zm0 0"
+        fill="#fff"
+      />
+    </svg>
+  );
+}
+
+export default SvgTwitter;

src/components/icons/User.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function SvgUser(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      width={18}
+      height="auto"
+      stroke="currentColor"
+      {...props}
+    >
+      <path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zm-4 7a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+    </svg>
+  );
+}
+
+export default SvgUser;

src/components/icons/Wishlist.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+function SvgWishlist(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      width={18}
+      height="auto"
+      stroke="currentColor"
+      {...props}
+    >
+      <path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
+    </svg>
+  );
+}
+
+export default SvgWishlist;

src/components/icons/Youtube.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+function SvgYoutube(props) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 18 18"
+      {...props}
+    >
+      <g fill="#fff">
+        <path d="M2.637 13.71h12.726A2.64 2.64 0 0018 11.075V2.637A2.64 2.64 0 0015.363 0H2.637A2.64 2.64 0 000 2.637v8.437a2.64 2.64 0 002.637 2.637zM1.055 2.638c0-.871.71-1.582 1.582-1.582h12.726c.871 0 1.582.71 1.582 1.582v8.437c0 .871-.71 1.582-1.582 1.582H2.637c-.871 0-1.582-.71-1.582-1.582zm0 0" />
+        <path d="M6.363 3.324v7.168l6.348-3.644zm1.055 1.79l3.144 1.75-3.144 1.804zm0 0" />
+      </g>
+    </svg>
+  );
+}
+
+export default SvgYoutube;

src/components/icons/index.js

@@ -0,0 +1,10 @@
+export { default as Bag } from './Bag'
+export { default as BurgerIcon } from './BurgerIcon'
+export { default as Facebook } from './Facebook'
+export { default as Instagram } from './Instagram'
+export { default as SearchIcon } from './SearchIcon'
+export { default as TailwindIcon } from './TailwindIcon'
+export { default as Twitter } from './Twitter'
+export { default as User } from './User'
+export { default as Wishlist } from './Wishlist'
+export { default as Youtube } from './Youtube'

src/components/layouts/footer/index.js

@@ -1,13 +1,68 @@
-const Footer = () => {
+/**
+ * Internal Dependencies.
+ */
+import {sanitize} from '../../../utils/miscellaneous';
+import { getIconComponentByName } from '../../../utils/icons-map';
+
+/**
+ * External Dependencies.
+ */
+import {isEmpty, isArray} from 'lodash';
+import Link from 'next/link';
+
+const Footer = ({footer}) => {
+
+	const { copyrightText, footerMenuItems, sidebarOne, sidebarTwo, socialLinks } = footer || {};
+
 	return (
-		<footer >
-			<a
-				href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-				target="_blank"
-				rel="noopener noreferrer"
-			>
-				Powered by{' '}
-			</a>
+		<footer className="bg-blue-500 p-6">
+			<div className="container mx-auto">
+				<div className="flex flex-wrap -mx-1 overflow-hidden text-white">
+					{/*Widget One*/}
+					<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
+						<div dangerouslySetInnerHTML={{ __html: sanitize( sidebarOne ) }}/>
+					</div>
+					{/*Widget Two*/}
+					<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
+						<div dangerouslySetInnerHTML={{ __html: sanitize( sidebarTwo ) }}/>
+					</div>
+
+					{/*	Footer Menus*/}
+					<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
+						{ !isEmpty( footerMenuItems ) && isArray( footerMenuItems ) ? (
+							<ul>
+								{ footerMenuItems.map( menuItem => (
+									<li key={menuItem?.ID}>
+										<Link href={menuItem?.url ?? '/'}>
+											<a>{menuItem?.title}</a>
+										</Link>
+									</li>
+								)) }
+							</ul>
+						) : null  }
+					</div>
+				</div>
+				<div className="mb-8 mt-8 w-full flex flex-wrap">
+					{/*Copyright Text*/}
+					<div className="w-full md:w-1/2 lg:w-1/4 text-white">
+						{ copyrightText ? copyrightText : '© Codeytek Academy 2021' }
+					</div>
+					<div className="w-full lg:w-3/4 flex justify-end">
+						{ !isEmpty( socialLinks ) && isArray( socialLinks ) ? (
+							<ul className="flex item-center">
+								{ socialLinks.map( socialLink => (
+									<li key={socialLink?.iconName} className="ml-4">
+										<a href={ socialLink?.iconUrl || '/' } target="_blank" title={socialLink?.iconName}>
+											{ getIconComponentByName( socialLink?.iconName ) }
+											<span className="sr-only">{socialLink?.iconName}</span>
+										</a>
+									</li>
+								) ) }
+							</ul>
+						) : null }
+					</div>
+				</div>
+			</div>
 		</footer>
 	)
 }