Skip to content

Commit 01b5de9

Browse files
thangchungthangchung
committed
add layout
1 parent 7bd4f87 commit 01b5de9

File tree

17 files changed

+2437
-830
lines changed

17 files changed

+2437
-830
lines changed

‎src/Web/assets/scss/base/_base.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Theme fonts
2+
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700,800,900&display=swap');
3+
4+
body {
5+
font-family: 'Quicksand', sans-serif;
6+
}
7+
8+
h1,h2,h3,h4,h5,h6 {
9+
font-weight: 600;
10+
}
11+
12+
footer[class=footer-main] {
13+
margin-top: 1rem;
14+
margin-bottom: 0rem;
15+
text-align: center;
16+
background-color: aliceblue;
17+
ul {
18+
display: flex;
19+
justify-content: space-between;
20+
padding: 4px 16px;
21+
margin: 0;
22+
> li {
23+
display: flex;
24+
padding: 6px 8px;
25+
> a {
26+
color: #067df7;
27+
text-decoration: none;
28+
font-size: 13px;
29+
}
30+
}
31+
}
32+
}

‎src/Web/assets/scss/main.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
// // Imports SCSS theme
2+
// // Vendors variables override and path
3+
@import "vendors/vendor";
4+
@import "base/base";

‎src/Web/assets/scss/vendors/_vendor.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/*
2+
|--------------------------------------------------------------------------
3+
| Vendor packages
4+
|--------------------------------------------------------------------------
5+
*/
6+
@import
7+
'node_modules/bootstrap/scss/bootstrap';

‎src/Web/constants/vars.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
const THEME = {
2+
title:'Practical Clean Domain-driven Design',
3+
description:'This is an example of Practical Clean Domain-driven Design repository',
4+
};
5+
6+
export {
7+
THEME
8+
};

‎src/Web/layout/MainLayout.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import { Container, Row, Col } from "reactstrap";
3+
import styled from "styled-components";
4+
5+
/* Components */
6+
import NavBar from "./nav/NavBar";
7+
import Footer from "./foot/Footer";
8+
9+
const MyRow = styled(Row)`
10+
margin-top: 30px;
11+
`
12+
13+
function MainLayout(mainProps) {
14+
const { children } = mainProps;
15+
16+
const props = {};
17+
18+
return (
19+
<>
20+
<NavBar {...props} />
21+
<Container fluid>
22+
<MyRow>
23+
<Col>{children}</Col>
24+
</MyRow>
25+
</Container>
26+
<Footer />
27+
</>
28+
);
29+
}
30+
31+
export default MainLayout;

‎src/Web/layout/foot/Footer.jsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
import Link from 'next/link';
3+
4+
const links = [{ href: '/page/documentation', label: 'Documentation' }].map(
5+
link => ({
6+
...link,
7+
key: `Footer-link-${link.href}-${link.label}`,
8+
}),
9+
);
10+
11+
function Footer() {
12+
return (
13+
<footer className="footer-main">
14+
<ul>
15+
<li>
16+
<Link href="/">
17+
<a>Home</a>
18+
</Link>
19+
</li>
20+
<li>
21+
<small className="text-muted">
22+
Copyright 2021 | Thang Chung. Fork this on&nbsp;
23+
<a
24+
href="https://github.com/thangchung/practical-clean-ddd"
25+
className="text-dark"
26+
>
27+
<i className="fab fa-github"></i> github.
28+
</a>
29+
</small>
30+
</li>
31+
{links.map(({ key, href, label }) => (
32+
<li key={key}>
33+
<a href={href}>{label}</a>
34+
</li>
35+
))}
36+
<style jsx>
37+
{`
38+
.text-dark {
39+
text-decoration: none;
40+
}
41+
`}
42+
</style>
43+
</ul>
44+
</footer>
45+
);
46+
}
47+
48+
export default Footer;

‎src/Web/layout/head/HeadDefault.jsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/* eslint-disable no-unused-vars */
2+
/** npm packages */
3+
import React, { Component } from 'react';
4+
import Head from 'next/head';
5+
import { THEME } from '../../constants/vars';
6+
7+
function HeadDefault({
8+
title,
9+
description,
10+
keyword,
11+
ogTitle,
12+
ogDescription,
13+
ogImageUrl,
14+
ogImageAlt,
15+
ogUrl,
16+
}) {
17+
return (
18+
<Head>
19+
<title>
20+
{title} | {THEME.title}
21+
</title>
22+
23+
<link rel="icon" href="/favicon.ico" />
24+
25+
{/* META SEO */}
26+
<meta name="title" content={title} />
27+
<meta name="description" content={description} />
28+
<meta name="keywords" content={keyword} />
29+
30+
{/* META OG */}
31+
<meta property="og:title" content={ogTitle} />
32+
<meta property="og:description" content={ogDescription} />
33+
<meta property="og:url" content={ogUrl} />
34+
<meta property="og:image" content={ogImageUrl} />
35+
<meta property="og:image:url" content={ogImageUrl} />
36+
<meta property="og:image:alt" content={ogImageAlt} />
37+
<meta property="og:image:type" content="image/jpg" />
38+
<meta property="og:image:width" content="1200" />
39+
<meta property="og:image:height" content="628" />
40+
</Head>
41+
);
42+
}
43+
44+
export default HeadDefault;

‎src/Web/layout/nav/NavBar.jsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from 'react';
2+
import {
3+
Collapse,
4+
Navbar,
5+
NavbarToggler,
6+
NavbarBrand,
7+
Nav,
8+
NavItem,
9+
NavLink,
10+
NavbarText,
11+
} from 'reactstrap';
12+
13+
import { atom, useAtom } from "jotai";
14+
15+
function NavBar() {
16+
const toggleAtom = atom(false);
17+
const [toggle, setToggle] = useAtom(toggleAtom);
18+
19+
return (
20+
<div>
21+
<Navbar color="light" light expand="md">
22+
<NavbarBrand href="/"><h5><b>eCommerce</b></h5></NavbarBrand>
23+
<NavbarToggler onClick={() => {setToggle(!toggle)}} />
24+
<Collapse isOpen={toggle} navbar>
25+
<Nav className="mr-auto" navbar>
26+
<NavItem>
27+
<NavLink href="/products">Products</NavLink>
28+
</NavItem>
29+
</Nav>
30+
<NavbarText>Thang Chung</NavbarText>
31+
</Collapse>
32+
</Navbar>
33+
</div>
34+
);
35+
}
36+
37+
export default NavBar;

0 commit comments

Comments
 (0)