├── .gitignore
├── README.md
├── components
    └── Tabs.js
├── layouts
    └── index.js
├── package.json
├── pages
    ├── index.js
    └── page-two.js
└── styles.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | yarn.lock
25 | .next/
26 | /src/.next
27 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # next-js-react-tabs-tutorial
 2 | Next.js and React Tabs tutorial
 3 | 
 4 | ## Setting up the application
 5 | ### Install all packages
 6 | ```yarn install```
 7 | 
 8 | ## Running the application
 9 | ```yarn run dev```
10 | 


--------------------------------------------------------------------------------
/components/Tabs.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Link from "next/link"
 3 | import { withRouter } from "next/router"
 4 | import { TabHead, TabContainer, TabBody, Tab } from "../styles"
 5 | 
 6 | const Tabs = ({ router }) => {
 7 |   const {
 8 |     query: { tab }
 9 |   } = router
10 | 
11 |   const isTabOne = tab === "1" || tab == null
12 |   const isTabTwo = tab === "2"
13 |   return (
14 |     <TabContainer>
15 |       <TabHead>
16 |         <Tab selected={isTabOne}>
17 |           <Link href={{ pathname: "/", query: { tab: "1" } }}>
18 |             <a>Tab 1</a>
19 |           </Link>
20 |         </Tab>
21 |         <Tab selected={isTabTwo}>
22 |           <Link href={{ pathname: "/", query: { tab: "2" } }}>
23 |             <a>Tab 2</a>
24 |           </Link>
25 |         </Tab>
26 |       </TabHead>
27 |       <TabBody>
28 |         {isTabOne && <React.Fragment>This is tab one content</React.Fragment>}
29 |         {isTabTwo && <React.Fragment>This is tab two content</React.Fragment>}
30 |       </TabBody>
31 |     </TabContainer>
32 |   )
33 | }
34 | 
35 | export default withRouter(Tabs)
36 | 


--------------------------------------------------------------------------------
/layouts/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Link from "next/link"
 3 | import { Nav, PageBody } from "../styles"
 4 | import { Global, css } from "@emotion/core"
 5 | 
 6 | const Layout = ({ children }) => {
 7 |   return (
 8 |     <React.Fragment>
 9 |       <Global
10 |         styles={css`
11 |           body {
12 |             margin: 0;
13 |             padding: 0;
14 |             font-family: sans-serif;
15 |           }
16 |           a {
17 |             text-decoration: none;
18 |           }
19 |         `}
20 |       />
21 |       <Nav>
22 |         <Link href="/">
23 |           <a>Home</a>
24 |         </Link>
25 |         <Link href="/page-two">
26 |           <a>Page 2</a>
27 |         </Link>
28 |       </Nav>
29 |       <PageBody>{children}</PageBody>
30 |     </React.Fragment>
31 |   )
32 | }
33 | 
34 | export default Layout
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "dev": "next",
 4 |     "build": "next build",
 5 |     "start": "next start"
 6 |   },
 7 |   "dependencies": {
 8 |     "@emotion/core": "^10.0.7",
 9 |     "@emotion/styled": "^10.0.7",
10 |     "next": "^8.0.3",
11 |     "react": "^16.8.4",
12 |     "react-dom": "^16.8.4"
13 |   },
14 |   "name": "next-tutorial",
15 |   "version": "1.0.0",
16 |   "description": "Next.js and React Tabs tutorial",
17 |   "main": "pages/index.js",
18 |   "devDependencies": {},
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "git+https://github.com/ugonnathelma/next-js-react-tabs-tutorial.git"
22 |   },
23 |   "keywords": [
24 |     "next.js",
25 |     "react",
26 |     "emotionjs",
27 |     "styled-components"
28 |   ],
29 |   "author": "Ugonna Thelma",
30 |   "license": "MIT",
31 |   "bugs": {
32 |     "url": "https://github.com/ugonnathelma/next-js-react-tabs-tutorial/issues"
33 |   },
34 |   "homepage": "https://github.com/ugonnathelma/next-js-react-tabs-tutorial#readme"
35 | }
36 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
 1 | import React from "react"
 2 | import Layout from "../layouts"
 3 | import Tabs from "../components/Tabs"
 4 | 
 5 | const PageOne = props => {
 6 |   return (
 7 |     <Layout>
 8 |       <Tabs />
 9 |     </Layout>
10 |   )
11 | }
12 | 
13 | export default PageOne
14 | 


--------------------------------------------------------------------------------
/pages/page-two.js:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import Layout from "../layouts"
3 | 
4 | const PageTwo = () => {
5 |   return <Layout>Page 2 Content</Layout>
6 | }
7 | 
8 | export default PageTwo
9 | 


--------------------------------------------------------------------------------
/styles.js:
--------------------------------------------------------------------------------
 1 | import styled from "@emotion/styled"
 2 | 
 3 | export const Nav = styled("div")`
 4 |   & > * {
 5 |     margin-left: 1em;
 6 |     color: white;
 7 |   }
 8 |   background: black;
 9 |   padding: 1em;
10 |   height: 2em;
11 |   display: flex;
12 |   align-items: center;
13 | `
14 | 
15 | export const PageBody = styled("div")`
16 |   width: 100%;
17 |   height: 100%;
18 |   padding: 2em;
19 | `
20 | 
21 | export const TabHead = styled("div")`
22 |   border-bottom: 1px solid black;
23 |   display: flex;
24 |   background: black;
25 | `
26 | 
27 | export const TabContainer = styled("div")`
28 |   width: 30em;
29 |   height: 30em;
30 |   webkit-box-shadow: -1px 0px 5px 0px rgba(184, 184, 184, 1);
31 |   -moz-box-shadow: -1px 0px 5px 0px rgba(184, 184, 184, 1);
32 |   box-shadow: -1px 0px 5px 0px rgba(184, 184, 184, 1);
33 | `
34 | 
35 | export const TabBody = styled(PageBody)`
36 |   height: 100%;
37 | `
38 | 
39 | export const Tab = styled("div")`
40 |   padding: 1em;
41 |   background: ${({ selected }) => (selected ? "grey" : "black")};
42 |   * {
43 |     color: white;
44 |   }
45 | `
46 | 


--------------------------------------------------------------------------------