Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 70a6128

Browse files
AceTheCreatorAceTheCreator
committed
added the app header
1 parent 82ff166 commit 70a6128

File tree

9 files changed

+180
-41
lines changed

9 files changed

+180
-41
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"react-codemirror": "^1.0.0",
1212
"react-codemirror2": "^7.2.1",
1313
"react-dom": "^17.0.1",
14+
"react-icons": "^4.1.0",
1415
"react-router-dom": "^5.2.0",
1516
"react-scripts": "4.0.0",
1617
"remarkable": "^2.0.1",

‎src/App.js

Lines changed: 3 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,15 @@
11
/* eslint-disable camelcase */
22
// import './App.css';
3-
import React, { useState, useReducer } from "react";
4-
import Cell from "./Cell";
5-
import { reducer } from "./reducer";
6-
import { makeGlobal, downLoad_notebook, load_notebook } from "./utils";
3+
import React from "react";
74
import Layout from "./components/layout/layout";
85
import NavBar from "./components/NavBar/navbar";
6+
import Routes from "./routes/routes";
97

10-
const defaultState = {
11-
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],
12-
};
138
function App() {
14-
const [state, dispatch] = useReducer(reducer, defaultState);
15-
const [currentCell, setCurrentCell] = useState(null);
16-
17-
makeGlobal();
18-
199
return (
2010
<Layout>
2111
<NavBar />
22-
<button
23-
onClick={() => {
24-
downLoad_notebook(state);
25-
}}
26-
>
27-
Download Notebook
28-
</button>
29-
<input
30-
type="file"
31-
id="import-notebook-file"
32-
onChange={() => {
33-
load_notebook(dispatch);
34-
}}
35-
></input>
36-
<br />
37-
{state.cells.map((cell, index) => {
38-
return (
39-
<Cell
40-
key={cell.id}
41-
cell={cell}
42-
dispatch={dispatch}
43-
currentCell={currentCell}
44-
setCurrentCell={setCurrentCell}
45-
cellId={index + 1}
46-
/>
47-
);
48-
})}
12+
<Routes />
4913
</Layout>
5014
);
5115
}

‎src/components/NavBar/navbar.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
Hamburger,
1212
Line,
1313
} from "./navbar.style";
14+
import logo from "../../static/logo.svg";
1415

1516
export default function NavBar() {
1617
const links = [
@@ -43,8 +44,22 @@ export default function NavBar() {
4344
<NavBg>
4445
<NavWrapper>
4546
<Logo>
46-
<NavLink to="/">
47-
<img src={""} alt="" /> D notebook
47+
<NavLink
48+
style={{
49+
display: "flex",
50+
alignItems: "center",
51+
}}
52+
to="/"
53+
>
54+
<img
55+
style={{
56+
borderRadius: "5px",
57+
}}
58+
width="35px"
59+
src={logo}
60+
alt="dnotebook-logo"
61+
/>{" "}
62+
<span style={{ marginLeft: "10px" }}>notebook</span>
4863
</NavLink>
4964
</Logo>
5065
<NavLinksList>

‎src/components/header/header.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
// eslint-disable-next-line import/no-extraneous-dependencies
3+
import PropTypes from "prop-types";
4+
import { CgSoftwareDownload, CgMathPlus } from "react-icons/cg";
5+
import {
6+
HeaderContainer,
7+
NoteEditContainer,
8+
NoteTitle,
9+
DownloadNoteBook,
10+
AddNoteInput,
11+
AddNoteLabel,
12+
} from "./header.style";
13+
14+
export default function Header({ download, load }) {
15+
return (
16+
<HeaderContainer>
17+
<div></div>
18+
<NoteEditContainer>
19+
<NoteTitle type="text" value="untitled.ipynb" />
20+
<div>
21+
<AddNoteLabel htmlFor="import-notebook-file">
22+
{" "}
23+
<CgMathPlus
24+
style={{
25+
fontSize: "24px",
26+
}}
27+
/>
28+
</AddNoteLabel>
29+
<AddNoteInput
30+
type="file"
31+
id="import-notebook-file"
32+
onChange={() => load()}
33+
/>
34+
</div>
35+
</NoteEditContainer>
36+
<DownloadNoteBook onClick={() => download()}>
37+
{" "}
38+
<CgSoftwareDownload
39+
style={{
40+
fontSize: "20px",
41+
}}
42+
/>{" "}
43+
Download Notebook
44+
</DownloadNoteBook>
45+
</HeaderContainer>
46+
);
47+
}
48+
49+
Header.propTypes = {
50+
load: PropTypes.func.isRequired,
51+
download: PropTypes.func.isRequired,
52+
};

‎src/components/header/header.style.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/* eslint-disable import/prefer-default-export */
2+
import styled from "styled-components";
3+
4+
export const HeaderContainer = styled.div`
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
width: 100%;
9+
padding: 10px;
10+
`;
11+
12+
export const NoteEditContainer = styled.div`
13+
display: flex;
14+
align-items: center;
15+
`;
16+
17+
export const NoteTitle = styled.input`
18+
background: transparent;
19+
text-align: center;
20+
font-size: 16px;
21+
border: none;
22+
border-radius: 5px;
23+
height: 40px;
24+
box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
25+
width: 150px;
26+
`;
27+
28+
export const DownloadNoteBook = styled.button`
29+
display: flex;
30+
align-items: center;
31+
justify-content: space-between;
32+
box-shadow: 0px 1px 1px 1px rgb(231, 231, 231);
33+
min-width: 100px;
34+
font-size: 14px;
35+
height: 40px;
36+
background: #ffdf28;
37+
border: none;
38+
border-radius: 3px;
39+
cursor: pointer;
40+
margin-right: 20px;
41+
`;
42+
43+
export const AddNoteInput = styled.input`
44+
opacity: 0;
45+
position: absolute;
46+
z-index: -1;
47+
`;
48+
49+
export const AddNoteLabel = styled.label`
50+
cursor: pointer;
51+
margin-left: 5px;
52+
`;

‎src/pages/demo.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React, { useState, useReducer } from "react";
2+
import Cell from "../Cell";
3+
import { reducer } from "../reducer";
4+
import { makeGlobal, downLoad_notebook, load_notebook } from "../utils";
5+
import Header from "../components/header/header";
6+
7+
const defaultState = {
8+
cells: [{ id: "cell_1", input: "", output: "", type: "code" }],
9+
};
10+
11+
export default function Demo() {
12+
const [state, dispatch] = useReducer(reducer, defaultState);
13+
const [currentCell, setCurrentCell] = useState(null);
14+
15+
makeGlobal();
16+
const load = () => load_notebook(dispatch);
17+
const download = () => downLoad_notebook(state);
18+
return (
19+
<div>
20+
<Header download={download} load={load} />
21+
{state.cells.map((cell, index) => {
22+
return (
23+
<Cell
24+
key={cell.id}
25+
cell={cell}
26+
dispatch={dispatch}
27+
currentCell={currentCell}
28+
setCurrentCell={setCurrentCell}
29+
cellId={index + 1}
30+
/>
31+
);
32+
})}
33+
</div>
34+
);
35+
}

‎src/routes/routes.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from "react";
2+
import { Route, Switch } from "react-router-dom";
3+
import Demo from "../pages/demo";
4+
5+
export default function Routes() {
6+
return (
7+
<Switch>
8+
<Route exact component={Demo} path="/demo" />
9+
</Switch>
10+
);
11+
}

‎src/static/logo.svg

Lines changed: 4 additions & 0 deletions
Loading

‎yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9128,6 +9128,11 @@ react-error-overlay@^6.0.8:
91289128
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.8.tgz#474ed11d04fc6bda3af643447d85e9127ed6b5de"
91299129
integrity sha512-HvPuUQnLp5H7TouGq3kzBeioJmXms1wHy9EGjz2OURWBp4qZO6AfGEcnxts1D/CbwPLRAgTMPCEgYhA3sEM4vw==
91309130

9131+
react-icons@^4.1.0:
9132+
version "4.1.0"
9133+
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.1.0.tgz#9ca9bcbf2e3aee8e86e378bb9d465842947bbfc3"
9134+
integrity sha512-FCXBg1JbbR0vWALXIxmFAfozHdVIJmmwCD81Jk0EKOt7Ax4AdBNcaRkWhR0NaKy9ugJgoY3fFvo0PHpte55pXg==
9135+
91319136
react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
91329137
version "16.13.1"
91339138
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"

0 commit comments

Comments
 (0)