Skip to content

Commit a6d6511

Browse files
imranhsayedimranhsayed
committed
Add Footer info;
1 parent c4344b7 commit a6d6511

File tree

11 files changed

+190
-38
lines changed

11 files changed

+190
-38
lines changed

‎src/components/icons/Bag.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
3+
function SvgBag(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
fill="none"
8+
viewBox="0 0 24 24"
9+
width={18}
10+
height="auto"
11+
stroke="currentColor"
12+
{...props}
13+
>
14+
<path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
15+
</svg>
16+
);
17+
}
18+
19+
export default SvgBag;

‎src/components/icons/User.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
3+
function SvgUser(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
fill="none"
8+
viewBox="0 0 24 24"
9+
width={18}
10+
height="auto"
11+
stroke="currentColor"
12+
{...props}
13+
>
14+
<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" />
15+
</svg>
16+
);
17+
}
18+
19+
export default SvgUser;

‎src/components/icons/Wishlist.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import * as React from "react";
2+
3+
function SvgWishlist(props) {
4+
return (
5+
<svg
6+
xmlns="http://www.w3.org/2000/svg"
7+
fill="none"
8+
viewBox="0 0 24 24"
9+
width={18}
10+
height="auto"
11+
stroke="currentColor"
12+
{...props}
13+
>
14+
<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" />
15+
</svg>
16+
);
17+
}
18+
19+
export default SvgWishlist;

‎src/components/icons/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
export { default as Bag } from './Bag'
12
export { default as BurgerIcon } from './BurgerIcon'
23
export { default as Facebook } from './Facebook'
34
export { default as Instagram } from './Instagram'
45
export { default as SearchIcon } from './SearchIcon'
56
export { default as TailwindIcon } from './TailwindIcon'
67
export { default as Twitter } from './Twitter'
8+
export { default as User } from './User'
9+
export { default as Wishlist } from './Wishlist'
710
export { default as Youtube } from './Youtube'

‎src/components/icons/svgs/bag.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/icons/svgs/burger-icon.svg

Lines changed: 2 additions & 3 deletions
Loading

‎src/components/icons/svgs/user.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/icons/svgs/wishlist.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/layouts/footer/index.js

Lines changed: 66 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,70 @@
1-
const Footer = () => {
1+
/**
2+
* Internal Dependencies.
3+
*/
4+
import {sanitize} from '../../../utils/miscellaneous';
5+
import { getIconComponentByName } from '../../../utils/icons-map';
6+
7+
/**
8+
* External Dependencies.
9+
*/
10+
import {isEmpty, isArray} from 'lodash';
11+
import Link from 'next/link';
12+
13+
const Footer = ({footer}) => {
14+
15+
console.warn( 'footer', footer );
16+
17+
const { copyrightText, footerMenuItems, sidebarOne, sidebarTwo, socialLinks } = footer || {};
18+
219
return (
3-
<footer >
4-
<a
5-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
6-
target="_blank"
7-
rel="noopener noreferrer"
8-
>
9-
Powered by{' '}
10-
</a>
20+
<footer className="bg-blue-500 p-6">
21+
<div className="container mx-auto">
22+
<div className="flex flex-wrap -mx-1 overflow-hidden text-white">
23+
{/*Widget One*/}
24+
<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
25+
<div dangerouslySetInnerHTML={{ __html: sanitize( sidebarOne ) }}/>
26+
</div>
27+
{/*Widget Two*/}
28+
<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
29+
<div dangerouslySetInnerHTML={{ __html: sanitize( sidebarTwo ) }}/>
30+
</div>
31+
32+
{/* Footer Menus*/}
33+
<div className="my-1 px-1 w-full overflow-hidden sm:w-full lg:w-1/2 xl:w-1/3">
34+
{ !isEmpty( footerMenuItems ) && isArray( footerMenuItems ) ? (
35+
<ul>
36+
{ footerMenuItems.map( menuItem => (
37+
<li key={menuItem?.ID}>
38+
<Link href={menuItem?.url}>
39+
<a>{menuItem?.title}</a>
40+
</Link>
41+
</li>
42+
)) }
43+
</ul>
44+
) : null }
45+
</div>
46+
</div>
47+
<div className="mb-8 mt-8 w-full flex flex-wrap">
48+
{/*Copyright Text*/}
49+
<div className="w-full md:w-1/2 lg:w-1/4 text-white">
50+
{ copyrightText ? copyrightText : '© Codeytek Academy 2021' }
51+
</div>
52+
<div className="w-full lg:w-3/4 flex justify-end">
53+
{ !isEmpty( socialLinks ) && isArray( socialLinks ) ? (
54+
<ul className="flex item-center">
55+
{ socialLinks.map( socialLink => (
56+
<li key={socialLink?.iconName} className="ml-4">
57+
<a href={ socialLink?.iconUrl || '/' } target="_blank" title={socialLink?.iconName}>
58+
{ getIconComponentByName( socialLink?.iconName ) }
59+
<span className="sr-only">{socialLink?.iconName}</span>
60+
</a>
61+
</li>
62+
) ) }
63+
</ul>
64+
) : null }
65+
</div>
66+
</div>
67+
</div>
1168
</footer>
1269
)
1370
}

‎src/components/layouts/header/index.js

Lines changed: 24 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
import Head from 'next/head';
22
import Link from 'next/link';
3+
import { useState } from 'react';
34
import { isEmpty } from 'lodash';
45

5-
import {BurgerIcon, TailwindIcon} from '../../icons';
6+
import { BurgerIcon, TailwindIcon, Bag, User, Wishlist } from '../../icons';
67

78
const Header = ( { header } ) => {
89

910
const { headerMenuItems, siteDescription, siteLogoUrl, siteTitle, favicon } = header || {};
1011

12+
const [ isMenuVisible, setMenuVisibility ] = useState( false );
13+
1114
return (
1215
<>
1316
<Head>
@@ -22,7 +25,8 @@ const Header = ( { header } ) => {
2225
<a>
2326
{
2427
siteLogoUrl ? (
25-
<img className="mr-2" src={ siteLogoUrl } alt={ `${ siteTitle } logo` } width="86"
28+
<img className="mr-2" src={ siteLogoUrl } alt={ `${ siteTitle } logo` }
29+
width="86"
2630
height="86"/>
2731
) : <TailwindIcon/>
2832
}
@@ -37,47 +41,41 @@ const Header = ( { header } ) => {
3741
</div>
3842
<div className="block lg:hidden">
3943
<button
44+
onClick={() => setMenuVisibility( ! isMenuVisible )}
4045
className="flex items-center px-3 py-2 border rounded text-black border-black hover:text-black hover:border-black">
41-
<BurgerIcon/>
46+
<BurgerIcon className="fill-current h-3 w-3"/>
4247
</button>
4348
</div>
44-
<div
45-
className="h-0 w-full overflow-hidden lg:h-full flex-grow lg:flex lg:items-center lg:w-auto">
49+
<div className={`${ isMenuVisible ? 'max-h-full' : 'h-0' } overflow-hidden w-full lg:h-full block flex-grow lg:flex lg:items-center lg:w-auto`}>
4650
<div className="text-sm font-medium uppercase lg:flex-grow">
4751
{ ! isEmpty( headerMenuItems ) && headerMenuItems.length ? headerMenuItems.map( menuItem => (
48-
<Link key={menuItem?.ID} href={ menuItem?.url || '/' }>
52+
<Link key={ menuItem?.ID } href={ menuItem?.url || '/' }>
4953
<a className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
50-
dangerouslySetInnerHTML={{__html: menuItem.title}}/>
54+
dangerouslySetInnerHTML={ { __html: menuItem.title } }/>
5155
</Link>
5256
) ) : null }
5357
</div>
5458
<div className="text-sm font-medium">
5559
<a href="#responsive-header"
56-
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
57-
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
58-
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
59-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
60-
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
61-
</svg>
60+
className="flex mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
61+
<span className="flex flex-row items-center lg:flex-col">
62+
<User className="mr-1 lg:mr-0"/>
6263
Profile
64+
</span>
6365
</a>
6466
<a href="#responsive-header"
65-
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
66-
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
67-
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
68-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
69-
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"></path>
70-
</svg>
71-
Wishlist
67+
className="flex mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
68+
<span className="flex flex-row items-center lg:flex-col">
69+
<Wishlist className="mr-1 lg:mr-0"/>
70+
Wishlist
71+
</span>
7272
</a>
73-
<a className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
73+
<a className="flex mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
7474
href="/cart/">
75-
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto"
76-
fill="none" viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
77-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
78-
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
79-
</svg>
75+
<span className="flex flex-row items-center lg:flex-col">
76+
<Bag className="mr-1 lg:mr-0"/>
8077
Bag
78+
</span>
8179
</a>
8280
</div>
8381
</div>

0 commit comments

Comments
 (0)