Skip to content

Commit 78eb030

Browse files
imranhsayedimranhsayed
committed
Add Header
1 parent 089d674 commit 78eb030

File tree

7 files changed

+146
-28
lines changed

7 files changed

+146
-28
lines changed

‎.env

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
NEXT_PUBLIC_WORDPRESS_SITE_URL=https://mydemo.codeytek.com

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,9 @@ yarn-error.log*
3030
.env.test.local
3131
.env.production.local
3232

33+
34+
.env
35+
3336
# vercel
3437
.vercel
3538

‎package-lock.json

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"start": "next start"
99
},
1010
"dependencies": {
11+
"axios": "^0.21.1",
1112
"next": "11.1.0",
1213
"react": "17.0.2",
1314
"react-dom": "17.0.2",

‎pages/index.js

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,35 @@
1-
import Head from 'next/head'
2-
import styles from '../styles/Home.module.css'
1+
import Header from '../src/components/layouts/header';
2+
import Footer from '../src/components/layouts/footer';
3+
import axios from 'axios';
34

4-
export default function Home() {
5-
return (
6-
<div className={styles.container}>
7-
<Head>
8-
<title>Create Next App</title>
9-
<link rel="icon" href="/favicon.ico" />
10-
</Head>
11-
12-
<main className={styles.main}>
13-
<h1 className={styles.title}>
14-
Welcome to <a href="https://nextjs.org">Next.js!</a>
15-
</h1>
16-
<p className="text-green-500">Hello</p>
17-
</main>
5+
export default function Home(props) {
6+
console.log( 'props', props );
7+
return (
8+
<div>
9+
<Header/>
10+
<main>
11+
<h1>
12+
Welcome to <a href="https://nextjs.org">Next.js!</a>
13+
</h1>
14+
<p className="text-green-500">Hello</p>
15+
</main>
16+
<Footer/>
17+
</div>
18+
);
19+
}
1820

19-
<footer className={styles.footer}>
20-
<a
21-
href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
22-
target="_blank"
23-
rel="noopener noreferrer"
24-
>
25-
Powered by{' '}
26-
<img src="/vercel.svg" alt="Vercel Logo" className={styles.logo} />
27-
</a>
28-
</footer>
29-
</div>
30-
)
21+
export async function getStaticProps() {
22+
const { data } = await axios.get( `${ process.env.NEXT_PUBLIC_WORDPRESS_SITE_URL }/wp-json/rae/v1/header-footer?header_location_id=hcms-menu-header&footer_location_id=hcms-menu-footer`);
23+
24+
return {
25+
props: {
26+
data: data || {},
27+
},
28+
/**
29+
* Revalidate means that if a new request comes to server, then every 1 sec it will check
30+
* if the data is changed, if it is changed then it will update the
31+
* static file inside .next folder with the new data, so that any 'SUBSEQUENT' requests should have updated data.
32+
*/
33+
revalidate: 1,
34+
};
3135
}

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const Footer = () => {
2+
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>
11+
</footer>
12+
)
13+
}
14+
15+
export default Footer;

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

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import Head from 'next/head'
2+
3+
const Header = () => {
4+
return (
5+
<>
6+
<Head>
7+
<title>Create Next App</title>
8+
<link rel="icon" href="/favicon.ico" />
9+
</Head>
10+
<div className="header">
11+
<nav className="bg-white p-4">
12+
<div className="flex items-center justify-between flex-wrap container mx-auto">
13+
<div className="flex items-center flex-shrink-0 text-black mr-20">
14+
<svg className="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54"
15+
xmlns="http://www.w3.org/2000/svg">
16+
<path
17+
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"></path>
18+
</svg>
19+
<span className="font-semibold text-xl tracking-tight"><a className=""
20+
href="/">WooNext</a></span>
21+
</div>
22+
<div className="block lg:hidden">
23+
<button
24+
className="flex items-center px-3 py-2 border rounded text-black border-black hover:text-black hover:border-black">
25+
<svg className="fill-current h-3 w-3" viewBox="0 0 20 20"
26+
xmlns="http://www.w3.org/2000/svg">
27+
<title>Menu</title>
28+
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
29+
</svg>
30+
</button>
31+
</div>
32+
<div className="h-0 w-full overflow-hidden lg:h-full flex-grow lg:flex lg:items-center lg:w-auto">
33+
<div className="text-sm font-medium uppercase lg:flex-grow"><a
34+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
35+
href="/categories/">Categories</a><a
36+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
37+
href="/">Women</a><a
38+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
39+
href="/">Kids</a><a
40+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
41+
href="/">Home &amp; Living</a><a
42+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
43+
href="/">Offers</a></div>
44+
<div className="text-sm font-medium">
45+
<a href="#responsive-header"
46+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
47+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto" fill="none"
48+
viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
49+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
50+
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>
51+
</svg>
52+
Profile
53+
</a>
54+
<a href="#responsive-header"
55+
className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10">
56+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto" fill="none"
57+
viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
58+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
59+
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>
60+
</svg>
61+
Wishlist
62+
</a>
63+
<a className="block mt-4 lg:inline-block lg:mt-0 text-black hover:text-black mr-10"
64+
href="/cart/">
65+
<svg xmlns="http://www.w3.org/2000/svg" className="hidden lg:block m-auto" fill="none"
66+
viewBox="0 0 24 24" width="18" height="auto" stroke="currentColor">
67+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
68+
d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
69+
</svg>
70+
Bag
71+
</a>
72+
</div>
73+
</div>
74+
</div>
75+
</nav>
76+
</div>
77+
</>
78+
);
79+
};
80+
81+
export default Header;

0 commit comments

Comments
 (0)