김대휘 / Do-gether

Go to a project
Toggle navigation Toggle navigation pinning
김대휘
fa3250bb 1 parent 0ea5d317

Set layout

Inline Side-by-side
Showing 3 changed files with 77 additions and 27 deletions
1 import React from "react"; 1 import React from "react";
2 -import "./App.css"; 2 +import { Container, Row, Col } from "reactstrap";
3 import NavBar from "./NavBar.js"; 3 import NavBar from "./NavBar.js";
4 import TodoCard from "./TodoCard.js"; 4 import TodoCard from "./TodoCard.js";
5 function App() { 5 function App() {
6 return ( 6 return (
7 <> 7 <>
8 <NavBar></NavBar> 8 <NavBar></NavBar>
9 - <TodoCard /> 9 + <Container style={{ paddingTop: "4rem" }}>
10 + <Row xs="2" sm="2" md="4">
11 + <Col>
12 + <TodoCard />
13 + </Col>
14 + <Col>
15 + <TodoCard />
16 + </Col>
17 + <Col>
18 + <TodoCard />
19 + </Col>
20 + <Col>
21 + <TodoCard />
22 + </Col>
23 + <Col>
24 + <TodoCard />
25 + </Col>
26 + <Col>
27 + <TodoCard />
28 + </Col>
29 + <Col>
30 + <TodoCard />
31 + </Col>
32 + <Col>
33 + <TodoCard />
34 + </Col>
35 + <Col>
36 + <TodoCard />
37 + </Col>
38 + <Col>
39 + <TodoCard />
40 + </Col>
41 + <Col>
42 + <TodoCard />
43 + </Col>
44 + <Col>
45 + <TodoCard />
46 + </Col>
47 + <Col>
48 + <TodoCard />
49 + </Col>
50 + <Col>
51 + <TodoCard />
52 + </Col>
53 + <Col>
54 + <TodoCard />
55 + </Col>
56 + <Col>
57 + <TodoCard />
58 + </Col>
59 + <Col>
60 + <TodoCard />
61 + </Col>
62 + <Col>
63 + <TodoCard />
64 + </Col>
65 + <Col>
66 + <TodoCard />
67 + </Col>
68 + <Col>
69 + <TodoCard />
70 + </Col>
71 + </Row>
72 + </Container>
10 </> 73 </>
11 ); 74 );
12 } 75 }
13 76
14 -export default App; 77 +export default App;
...\ No newline at end of file ...\ No newline at end of file
......
1 import React, { useState } from 'react'; 1 import React, { useState } from 'react';
2 import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; 2 import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
3 3
4 -const Example = (props) => { 4 +const NavBar = (props) => {
5 - const [collapsed, setCollapsed] = useState(true);
6 5
6 + const [collapsed, setCollapsed] = useState(true);
7 const toggleNavbar = () => setCollapsed(!collapsed); 7 const toggleNavbar = () => setCollapsed(!collapsed);
8 8
9 return ( 9 return (
10 <div> 10 <div>
11 - <Navbar style={{backgroundColor:"rgba(0,0,0,0.5)"}} light> 11 + <Navbar style={{backgroundColor:"rgba(0,0,0,0.5)"}} light fixed="top">
12 <NavbarBrand href="/" className="mr-auto" style={{marginLeft:"auto",marginRight:"auto"}}>Do-gether</NavbarBrand> 12 <NavbarBrand href="/" className="mr-auto" style={{marginLeft:"auto",marginRight:"auto"}}>Do-gether</NavbarBrand>
13 - <NavbarToggler onClick={toggleNavbar} className="mr-2" /> 13 + <NavbarToggler onClick={toggleNavbar} className="mr-2"/>
14 - <Collapse isOpen={!collapsed} navbar> 14 + <Collapse isOpen={!collapsed} navbar>
15 <Nav navbar> 15 <Nav navbar>
16 <NavItem> 16 <NavItem>
17 <NavLink href="/components/">Components</NavLink> 17 <NavLink href="/components/">Components</NavLink>
18 </NavItem> 18 </NavItem>
19 <NavItem> 19 <NavItem>
20 - <NavLink href="www.naver.com">GitHub</NavLink> 20 + <NavLink href="www.google.com">GitHub</NavLink>
21 </NavItem> 21 </NavItem>
22 </Nav> 22 </Nav>
23 </Collapse> 23 </Collapse>
...@@ -26,4 +26,4 @@ const Example = (props) => { ...@@ -26,4 +26,4 @@ const Example = (props) => {
26 ); 26 );
27 } 27 }
28 28
29 -export default Example;
...\ No newline at end of file ...\ No newline at end of file
29 +export default NavBar;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -2,28 +2,15 @@ import React from "react"; ...@@ -2,28 +2,15 @@ import React from "react";
2 import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap"; 2 import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap";
3 function TodoCard(props) { 3 function TodoCard(props) {
4 return ( 4 return (
5 - <Row> 5 + <>
6 - <Col sm="6"> 6 + <Card body style={{ marginBottom: "1rem" }}>
7 - <Card body>
8 <CardTitle>Special Title Treatment</CardTitle> 7 <CardTitle>Special Title Treatment</CardTitle>
9 <CardText> 8 <CardText>
10 - With supporting text below as a natural lead-in to additional 9 + With supporting text below as a natural lead-in to additional helod.
11 - content.
12 </CardText> 10 </CardText>
13 <Button>Go somewhere</Button> 11 <Button>Go somewhere</Button>
14 </Card> 12 </Card>
15 - </Col> 13 + </>
16 - <Col sm="6">
17 - <Card body>
18 - <CardTitle>Special Title Treatment</CardTitle>
19 - <CardText>
20 - With supporting text below as a natural lead-in to additional
21 - content.
22 - </CardText>
23 - <Button>Go somewhere</Button>
24 - </Card>
25 - </Col>
26 - </Row>
27 ); 14 );
28 } 15 }
29 16
......