Merge branch 'master' of https://bitbucket.org/vel1024/capstone
Showing
6 changed files
with
111 additions
and
1 deletions
1 | import React from "react"; | 1 | import React from "react"; |
2 | import GlobalStyles from "../Styles/GlobalStyles"; | 2 | import GlobalStyles from "../Styles/GlobalStyles"; |
3 | +import Header from "./Header"; | ||
4 | +import Image from "./Image"; | ||
5 | +import Grid from "./Grid"; | ||
3 | 6 | ||
4 | export default () => { | 7 | export default () => { |
5 | return ( | 8 | return ( |
6 | <> | 9 | <> |
7 | <GlobalStyles /> | 10 | <GlobalStyles /> |
8 | - <div id="App"></div> | 11 | + <Header /> |
12 | + <Image /> | ||
13 | + <Grid /> | ||
9 | </> | 14 | </> |
10 | ); | 15 | ); |
11 | }; | 16 | }; | ... | ... |
front/src/Components/Article.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import Styled from "styled-components"; | ||
3 | + | ||
4 | +const Article = Styled.div` | ||
5 | + width: 70%; | ||
6 | + justify-content: center; | ||
7 | + align-items: center; | ||
8 | + text-align: center; | ||
9 | + margin-top: 10px; | ||
10 | + border-top: 1px solid black; | ||
11 | +`; | ||
12 | + | ||
13 | +export default () => { | ||
14 | + return ( | ||
15 | + <Article> | ||
16 | + <h1>Article Title</h1> | ||
17 | + </Article> | ||
18 | + ); | ||
19 | +}; |
front/src/Components/Grid.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import Styled from "styled-components"; | ||
3 | +import MenuList from "./MenuList"; | ||
4 | +import Article from "./Article"; | ||
5 | + | ||
6 | +const Grid = Styled.div` | ||
7 | + width: 100%; | ||
8 | + display: flex; | ||
9 | +`; | ||
10 | + | ||
11 | +export default () => { | ||
12 | + return ( | ||
13 | + <Grid> | ||
14 | + <MenuList /> | ||
15 | + <Article /> | ||
16 | + </Grid> | ||
17 | + ); | ||
18 | +}; |
front/src/Components/Header.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import Styled from "styled-components"; | ||
3 | + | ||
4 | +const Header = Styled.div` | ||
5 | + width: 100%; | ||
6 | + display: flex; | ||
7 | + justify-content: center; | ||
8 | + margin: 10px 0px; | ||
9 | + font-size: 25px; | ||
10 | +`; | ||
11 | + | ||
12 | +export default () => { | ||
13 | + return ( | ||
14 | + <Header> | ||
15 | + <h1>KHU Chatting service</h1> | ||
16 | + </Header> | ||
17 | + ); | ||
18 | +}; |
front/src/Components/Image.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import Styled from "styled-components"; | ||
3 | + | ||
4 | +const Image = Styled.div` | ||
5 | + width: 100%; | ||
6 | + margin: 20px 0px; | ||
7 | + display: flex; | ||
8 | + justify-content: center; | ||
9 | +`; | ||
10 | + | ||
11 | +export default () => { | ||
12 | + return ( | ||
13 | + <Image> | ||
14 | + <img src="" alt="sample"></img> | ||
15 | + </Image> | ||
16 | + ); | ||
17 | +}; |
front/src/Components/MenuList.js
0 → 100644
1 | +import React from "react"; | ||
2 | +import Styled from "styled-components"; | ||
3 | + | ||
4 | +const MenuBox = Styled.div` | ||
5 | + width: 30%; | ||
6 | + display: flex; | ||
7 | + justify-content: center; | ||
8 | + align-items: center; | ||
9 | + margin-top: 10px; | ||
10 | + border-top: 1px solid black; | ||
11 | + border-right: 1px solid black; | ||
12 | +`; | ||
13 | + | ||
14 | +const MenuList = Styled.ol` | ||
15 | +`; | ||
16 | + | ||
17 | +const MenuItem = Styled.li` | ||
18 | +`; | ||
19 | + | ||
20 | +const Link = Styled.a` | ||
21 | +`; | ||
22 | + | ||
23 | +export default () => { | ||
24 | + return ( | ||
25 | + <MenuBox> | ||
26 | + <MenuList> | ||
27 | + <MenuItem> | ||
28 | + <Link href="">1. What is KHU Chat?</Link> | ||
29 | + </MenuItem> | ||
30 | + </MenuList> | ||
31 | + </MenuBox> | ||
32 | + ); | ||
33 | +}; |
-
Please register or login to post a comment