Complete all tasks #68
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,37 @@ | ||
| import React from 'react'; | ||
| import { ThemeProvider } from "styled-components"; | ||
| import Alert from "../src/components/Alert/Alert"; | ||
| import { Row, Col, Alert as RBAlert } from "react-bootstrap"; | ||
|
|
||
| const theme = { | ||
| colors: { | ||
| primary: "#CCE5FF", | ||
| primaryText: "#004085", | ||
| primaryBorder: "#B8DAFF", | ||
| secondary: "#E2E3E5", | ||
| secondaryText: "#383D41", | ||
| secondaryBorder: "#D6D8DB", | ||
| }, | ||
| }; | ||
|
|
||
| const Task01 = () => { | ||
| return ( | ||
| <Row> | ||
| <Col> | ||
| <RBAlert variant="primary"> | ||
| Uwaga! <em>Styled Components</em> nadchodzi! | ||
| </RBAlert> | ||
| </Col> | ||
| <Col> | ||
| <ThemeProvider theme={theme}> | ||
| <Alert variant="primary"> | ||
| Uwaga! <em>Styled Components</em> nadchodzi! | ||
| </Alert> | ||
| </ThemeProvider> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default Task01; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,51 @@ | ||
| import React from 'react'; | ||
| import { ThemeProvider } from "styled-components"; | ||
| import Button from "./../src/components/Button"; | ||
| import { Row, Col, Button as RBButton } from "react-bootstrap"; | ||
|
|
||
| export const theme = { | ||
|
Owner
There was a problem hiding this comment. Można było wykorzystać jeden plik to wszystkich elementów ;) |
||
| colors: { | ||
| primary: "#007BFF", | ||
| primaryText: "white", | ||
| secondary: "#FFCA2C", | ||
| secondaryText: "black", | ||
| }, | ||
| button: { | ||
| sizes: { | ||
| sm: { | ||
| padding: "0.25rem 0.5rem", | ||
| fontSize: "0.875rem", | ||
| }, | ||
| md: { | ||
| padding: "0.5rem 1rem", | ||
| fontSize: "1rem", | ||
| }, | ||
| lg: { | ||
| padding: "0.55rem 1.2rem", | ||
| fontSize: "1.25rem", | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const Task02 = () => { | ||
| return ( | ||
| <Row> | ||
| <Col> | ||
| <RBButton variant="primary" size="lg"> | ||
| Button! | ||
| </RBButton> | ||
| </Col> | ||
| <Col> | ||
| <ThemeProvider theme={theme}> | ||
| <Button variant="primary" size="lg"> | ||
| Button! | ||
| </Button> | ||
| </ThemeProvider> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default Task02; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,25 +1,31 @@ | ||
| import React from 'react'; | ||
| import BreadcrumbSC from "../src/components/Breadcrumb"; | ||
| import { Row, Col, Breadcrumb as RBBreadcrumb } from "react-bootstrap"; | ||
|
|
||
| const Task03 = () => { | ||
| return ( | ||
| <Row> | ||
| <Col> | ||
| <RBBreadcrumb> | ||
| <RBBreadcrumb.Item href="#">Home</RBBreadcrumb.Item> | ||
| <RBBreadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> | ||
| Library | ||
| </RBBreadcrumb.Item> | ||
| <RBBreadcrumb.Item active>Data</RBBreadcrumb.Item> | ||
| </RBBreadcrumb> | ||
| </Col> | ||
| <Col> | ||
| <BreadcrumbSC> | ||
| <BreadcrumbSC.Item href="#">Home</BreadcrumbSC.Item> | ||
| <BreadcrumbSC.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/"> | ||
| Library | ||
| </BreadcrumbSC.Item> | ||
| <BreadcrumbSC.Item active>Data</BreadcrumbSC.Item> | ||
| </BreadcrumbSC> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| export default Task03; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,72 @@ | ||
| import React from 'react'; | ||
|
|
||
| import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; | ||
| import Tabs from "../src/components/Tabs"; | ||
|
|
||
| const Task04 = () => { | ||
| return ( | ||
| <Row> | ||
| <Col> | ||
| <RBTabs defaultActiveKey="profile" id="uncontrolled-tab-example"> | ||
| <RBTab eventKey="home" title="Home"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur | ||
| condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante | ||
| ipsum primis in faucibus orci luctus et ultrices posuere cubilia | ||
| Curae;{" "} | ||
| </p> | ||
| </RBTab> | ||
| <RBTab eventKey="profile" title="Profile"> | ||
| <p> | ||
| Donec dignissim ultricies felis, eu dictum eros congue in. In | ||
| gravida lobortis libero nec tempus. Cras rutrum nisl ut leo | ||
| volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, | ||
| tincidunt eu lacus. | ||
| </p> | ||
| </RBTab> | ||
| <RBTab eventKey="contact" title="Contact" disabled> | ||
| <p> | ||
| Vivamus metus nulla, fermentum eget placerat vitae, mollis | ||
| interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, | ||
| suscipit non orci. Integer justo odio, suscipit eget tortor nec, | ||
| molestie lobortis eros. Nullam commodo elit sit amet lacus blandit | ||
| aliquet. Mauris at nibh eget nisl pulvinar dignissim. | ||
| </p> | ||
| </RBTab> | ||
| </RBTabs> | ||
| </Col> | ||
| <Col> | ||
| <Tabs defaultActiveKey="profile"> | ||
| <Tabs.Tab eventKey="home" title="Home"> | ||
| <p> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur | ||
| condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante | ||
| ipsum primis in faucibus orci luctus et ultrices posuere cubilia | ||
| Curae;{" "} | ||
| </p> | ||
| </Tabs.Tab> | ||
| <Tabs.Tab eventKey="profile" title="Profile"> | ||
| <p> | ||
| Donec dignissim ultricies felis, eu dictum eros congue in. In | ||
| gravida lobortis libero nec tempus. Cras rutrum nisl ut leo | ||
| volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, | ||
| tincidunt eu lacus. | ||
| </p> | ||
| </Tabs.Tab> | ||
| <Tabs.Tab eventKey="contact" title="Contact" disabled> | ||
| <p> | ||
| Vivamus metus nulla, fermentum eget placerat vitae, mollis | ||
| interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, | ||
| suscipit non orci. Integer justo odio, suscipit eget tortor nec, | ||
| molestie lobortis eros. Nullam commodo elit sit amet lacus blandit | ||
| aliquet. Mauris at nibh eget nisl pulvinar dignissim. | ||
| </p> | ||
| </Tabs.Tab> | ||
| </Tabs> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
|
|
||
| export default Task04; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,29 +1,46 @@ | ||
| import React from 'react'; | ||
| import Card from "../src/components/Card"; | ||
| import { Row, Col, Card as RBCard, Button as RBButton } from "react-bootstrap"; | ||
| import Button from "../src/components/Button/Button"; | ||
| import { ThemeProvider } from "styled-components"; | ||
| import { theme } from "../02/Task02"; | ||
|
|
||
|
|
||
| const Task05 = () => { | ||
| return ( | ||
| <Row> | ||
| <Col> | ||
| <RBCard style={{ width: "18rem" }}> | ||
| <RBCard.Img variant="top" src="https://picsum.photos/100/80" /> | ||
| <RBCard.Body> | ||
| <RBCard.Title>Card Title</RBCard.Title> | ||
| <RBCard.Text> | ||
| Some quick example text to build on the card title and make up the | ||
| bulk of the card's content. | ||
| </RBCard.Text> | ||
| <RBButton variant="primary">Go somewhere</RBButton> | ||
| </RBCard.Body> | ||
| </RBCard> | ||
| </Col> | ||
| <Col> | ||
| <ThemeProvider theme={theme}> | ||
| <Card style={{ width: "18rem" }}> | ||
| <Card.Img variant="top" src="https://picsum.photos/100/80" /> | ||
| <Card.Body> | ||
| <Card.Title>Card Title</Card.Title> | ||
| <Card.Text> | ||
| Some quick example text to build on the card title and make up | ||
| the bulk of the card's content. | ||
| </Card.Text> | ||
| <Button variant="primary" size="md"> | ||
| Go somewhere | ||
| </Button> | ||
| </Card.Body> | ||
| </Card> | ||
| </ThemeProvider> | ||
| </Col> | ||
| </Row> | ||
| ); | ||
| }; | ||
|
|
||
| export default Task05; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -27,6 +27,6 @@ | |
| "react": "^18.2.0", | ||
| "react-bootstrap": "^1.0.0", | ||
| "react-dom": "^18.2.0", | ||
| "styled-components": "^5.3.11" | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,8 @@ | ||
| import React from "react"; | ||
| import * as S from "./Alert.styled"; | ||
|
|
||
| const Alert = ({ variant = "primary", children }) => { | ||
| return <S.Alert variant={variant}>{children}</S.Alert>; | ||
| }; | ||
|
|
||
| export default Alert; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,21 @@ | ||
| import styled from "styled-components"; | ||
|
|
||
| export const Alert = styled.div` | ||
| padding: 0.75rem 1.25rem; | ||
| margin-bottom: 1rem; | ||
| border-radius: 0.2rem; | ||
| color: ${({ variant, theme }) => | ||
| variant === "primary" | ||
| ? theme.colors.primaryText | ||
| : theme.colors.secondaryText}; | ||
|
|
||
| background-color: ${({ variant, theme }) => | ||
| variant === "primary" ? theme.colors.primary : theme.colors.secondary}; | ||
|
|
||
| border: 1px solid | ||
| ${({ variant, theme }) => | ||
| variant === "primary" | ||
| ? theme.colors.primaryBorder | ||
| : theme.colors.secondaryBorder}; | ||
| font-size: 1rem; | ||
| `; | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1 @@ | ||
| export { default } from "./Alert"; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Można też trzymać w osobnym pliku :)