MinsoftK

Merge branch 'master' of https://bitbucket.org/vel1024/capstone

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 };
......
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 +};
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 +};
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 +};
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 +};
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 +};