김대휘 / 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
import React from "react";
import "./App.css";
import { Container, Row, Col } from "reactstrap";
import NavBar from "./NavBar.js";
import TodoCard from "./TodoCard.js";
function App() {
return (
<>
<NavBar></NavBar>
<TodoCard />
<Container style={{ paddingTop: "4rem" }}>
<Row xs="2" sm="2" md="4">
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
<Col>
<TodoCard />
</Col>
</Row>
</Container>
</>
);
}
export default App;
export default App;
\ No newline at end of file
......
import React, { useState } from 'react';
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap';
const Example = (props) => {
const [collapsed, setCollapsed] = useState(true);
const NavBar = (props) => {
const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);
return (
<div>
<Navbar style={{backgroundColor:"rgba(0,0,0,0.5)"}} light>
<Navbar style={{backgroundColor:"rgba(0,0,0,0.5)"}} light fixed="top">
<NavbarBrand href="/" className="mr-auto" style={{marginLeft:"auto",marginRight:"auto"}}>Do-gether</NavbarBrand>
<NavbarToggler onClick={toggleNavbar} className="mr-2" />
<Collapse isOpen={!collapsed} navbar>
<NavbarToggler onClick={toggleNavbar} className="mr-2"/>
<Collapse isOpen={!collapsed} navbar>
<Nav navbar>
<NavItem>
<NavLink href="/components/">Components</NavLink>
</NavItem>
<NavItem>
<NavLink href="www.naver.com">GitHub</NavLink>
<NavLink href="www.google.com">GitHub</NavLink>
</NavItem>
</Nav>
</Collapse>
......@@ -26,4 +26,4 @@ const Example = (props) => {
);
}
export default Example;
\ No newline at end of file
export default NavBar;
\ No newline at end of file
......
......@@ -2,28 +2,15 @@ import React from "react";
import { Card, Button, CardTitle, CardText, Row, Col } from "reactstrap";
function TodoCard(props) {
return (
<Row>
<Col sm="6">
<Card body>
<>
<Card body style={{ marginBottom: "1rem" }}>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional
content.
With supporting text below as a natural lead-in to additional helod.
</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
<Col sm="6">
<Card body>
<CardTitle>Special Title Treatment</CardTitle>
<CardText>
With supporting text below as a natural lead-in to additional
content.
</CardText>
<Button>Go somewhere</Button>
</Card>
</Col>
</Row>
</>
);
}
......