From 17229953a513a61e6cbd041d313bd74201bb014b Mon Sep 17 00:00:00 2001 From: Patryk Date: Sun, 23 Jun 2024 20:06:45 +0200 Subject: [PATCH 1/5] Done task 01 --- 01/Task01.js | 19 +++++++++++-------- src/components/Alert/Alert.js | 14 ++++++-------- src/components/Alert/Alert.styled.js | 20 ++++++++++++++++---- src/components/Alert/index.js | 5 ++--- 4 files changed, 35 insertions(+), 23 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..39b76963 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -1,20 +1,23 @@ -import React from 'react'; +import React from "react"; -import Alert from './../src/components/Alert'; -import { Row, Col, Alert as RBAlert } from 'react-bootstrap'; +import Alert from "./../src/components/Alert/"; +import { Row, Col, Alert as RBAlert } from "react-bootstrap"; const Task01 = () => { return ( - Uwaga! Styled Components nadchodzi! + + Uwaga! Styled Components nadchodzi! + - Uwaga! Styled Components nadchodzi! + + Uwaga! Styled Components nadchodzi! + - ) -} + ); +}; export default Task01; - diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..e5ca849c 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -1,11 +1,9 @@ -import React from 'react'; +import React from "react"; -import { StyledAlert } from './Alert.styled'; +import { StyledAlert } from "./Alert.styled"; -const Alert = props => { - return ( - {props.children} - ); -} +const Alert = ({ variant, children }) => { + return {children}; +}; -export default Alert; \ No newline at end of file +export default Alert; diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..6c2ac2aa 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,7 +1,19 @@ -import styled from 'styled-components'; +import styled from "styled-components"; const StyledAlert = styled.div` - display: block; -` + padding: 12px 10px; -export { StyledAlert }; \ No newline at end of file + margin-bottom: 15px; + + border: 1px solid transparent; + + border-radius: 4px; + + color: #6e88af; + + background-color: ${(props) => props.theme[props.variant] || "#031633"}; + + border-color: ${(props) => props.theme[props.variant] || "#b8daff"}; +`; + +export { StyledAlert }; diff --git a/src/components/Alert/index.js b/src/components/Alert/index.js index 6c0b7ef7..f1a2cf4d 100644 --- a/src/components/Alert/index.js +++ b/src/components/Alert/index.js @@ -1,4 +1,3 @@ -import Alert from './Alert'; +import Alert from "./Alert"; - -export default Alert; \ No newline at end of file +export default Alert; From 92739e3c4973cd7577caccdaf95b23289a4f3513 Mon Sep 17 00:00:00 2001 From: Patryk Date: Sun, 23 Jun 2024 20:55:54 +0200 Subject: [PATCH 2/5] Done task 02 --- 02/Task02.js | 19 ++++++++------ src/components/Alert/Alert.styled.js | 10 ++++---- src/components/App.js | 35 +++++++++++++------------- src/components/Button/Button.js | 17 +++++++++++++ src/components/Button/Button.styled.js | 19 ++++++++++++++ src/components/Button/index.js | 2 ++ 6 files changed, 72 insertions(+), 30 deletions(-) diff --git a/02/Task02.js b/02/Task02.js index 0894136e..37e91172 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -1,20 +1,23 @@ -import React from 'react'; +import React from "react"; -import Button from './../src/components/Button'; -import { Row, Col, Button as RBButton } from 'react-bootstrap'; +import Button from "./../src/components/Button"; +import { Row, Col, Button as RBButton } from "react-bootstrap"; const Task02 = () => { return ( - Button! + + Button! + - Button! + -) -} + ); +}; export default Task02; - diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 6c2ac2aa..04ee2b6a 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -1,19 +1,19 @@ import styled from "styled-components"; const StyledAlert = styled.div` - padding: 12px 10px; + padding: 0.75rem 1.25rem; - margin-bottom: 15px; + margin-bottom: 1rem; border: 1px solid transparent; - border-radius: 4px; + border-radius: 0.25rem; - color: #6e88af; + color: #004085; background-color: ${(props) => props.theme[props.variant] || "#031633"}; - border-color: ${(props) => props.theme[props.variant] || "#b8daff"}; + border-color: ${(props) => props.theme[props.variant] || "#6ea8fe"}; `; export { StyledAlert }; diff --git a/src/components/App.js b/src/components/App.js index 5b5322a5..217312ca 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -1,12 +1,12 @@ -import React from 'react'; -import { Container, Row, Col } from 'react-bootstrap'; - -import Task01 from './../../01/Task01'; -import Task02 from './../../02/Task02'; -import Task03 from './../../03/Task03'; -import Task04 from './../../04/Task04'; -import Task05 from './../../05/Task05'; +import React from "react"; +import { Container, Row, Col } from "react-bootstrap"; +import { ThemeProvider } from "styled-components"; +import Task01 from "./../../01/Task01"; +import Task02 from "./../../02/Task02"; +import Task03 from "./../../03/Task03"; +import Task04 from "./../../04/Task04"; +import Task05 from "./../../05/Task05"; const App = () => { return ( @@ -14,19 +14,20 @@ const App = () => { -

Komponenty React Boostrap

+

Komponenty React Boostrap

+

Komponenty Twoje

 - - - - - + + + + + - ) -} + ); +}; -export default App; \ No newline at end of file +export default App; diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..c4a760bc 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,17 @@ +import React from "react"; +import { StyledButton } from "./Button.styled"; + +const Button = ({ variant, size, active, disabled, children }) => { + return ( + + {children} + + ); +}; + +export default Button; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..bd4f9926 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,19 @@ +import styled from "styled-components"; + +const StyledButton = styled.button` + padding: ${(props) => + props.size === "lg" ? "0.5rem 1rem" : "0.25rem 0.5rem"}; + font-size: ${(props) => (props.size === "lg" ? "1.25rem" : "1rem")}; + background-color: ${(props) => props.theme[props.variant] || "#5C636A"}; + border: 1px solid ${(props) => props.theme[props.variant] || "#5C636A"}; + border-radius: 0.25rem; + color: white; + opacity: ${(props) => (props.disabled ? 0.65 : 1)}; + pointer-events: ${(props) => (props.disabled ? "none" : "initial")}; + cursor: ${(props) => (props.disabled ? "default" : "pointer")}; + &:hover { + background-color: #5c636a; + } +`; + +export { StyledButton }; diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..317a2983 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -0,0 +1,2 @@ +import Button from "./Button"; +export default Button; From 76b807f87d2fc8a74c7140f4d1c9ee5942a00546 Mon Sep 17 00:00:00 2001 From: Patryk Date: Sun, 23 Jun 2024 21:06:23 +0200 Subject: [PATCH 3/5] Done task 03 --- 03/Task03.js | 18 ++++++++++----- src/components/App.js | 13 +++++++++-- src/components/Breadcrumbs/Breadcrumb.js | 15 ++++++++++++ .../Breadcrumbs/Breadcrumb.styled.js | 15 ++++++++++++ src/components/Breadcrumbs/BreadcrumbItem.js | 12 ++++++++++ .../Breadcrumbs/BreadcrumbItem.styled.js | 23 +++++++++++++++++++ src/components/Breadcrumbs/index.js | 2 ++ 7 files changed, 90 insertions(+), 8 deletions(-) create mode 100644 src/components/Breadcrumbs/Breadcrumb.js create mode 100644 src/components/Breadcrumbs/Breadcrumb.styled.js create mode 100644 src/components/Breadcrumbs/BreadcrumbItem.js create mode 100644 src/components/Breadcrumbs/BreadcrumbItem.styled.js create mode 100644 src/components/Breadcrumbs/index.js diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..e1150bdb 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,6 +1,7 @@ -import React from 'react'; +import React from "react"; -import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; +import { Row, Col, Breadcrumb as RBBreadcrumb } from "react-bootstrap"; +import Breadcrumb from "../src/components/Breadcrumbs/index"; const Task03 = () => { return ( @@ -15,11 +16,16 @@ const Task03 = () => { - Breadcrumb! + + Home + + Library + + Data + -) -} + ); +}; export default Task03; - diff --git a/src/components/App.js b/src/components/App.js index 217312ca..94328007 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -8,9 +8,18 @@ import Task03 from "./../../03/Task03"; import Task04 from "./../../04/Task04"; import Task05 from "./../../05/Task05"; +const theme = { + primary: "#007bff", + primaryDark: "#0056b3", + primaryHover: "#0069d9", + secondary: "#6c757d", + secondaryDark: "#545b62", + secondaryHover: "#5a6268", +}; + const App = () => { return ( - <> + @@ -26,7 +35,7 @@ const App = () => { - + ); }; diff --git a/src/components/Breadcrumbs/Breadcrumb.js b/src/components/Breadcrumbs/Breadcrumb.js new file mode 100644 index 00000000..8ff4852b --- /dev/null +++ b/src/components/Breadcrumbs/Breadcrumb.js @@ -0,0 +1,15 @@ +import React from "react"; +import { StyledBreadcrumb } from "./Breadcrumb.styled"; +import BreadcrumbItem from "./BreadcrumbItem"; + +const Breadcrumb = ({ children }) => { + return ( + +
    {children}
+ + ); +}; + +Breadcrumb.Item = BreadcrumbItem; + +export default Breadcrumb; diff --git a/src/components/Breadcrumbs/Breadcrumb.styled.js b/src/components/Breadcrumbs/Breadcrumb.styled.js new file mode 100644 index 00000000..a0061bd1 --- /dev/null +++ b/src/components/Breadcrumbs/Breadcrumb.styled.js @@ -0,0 +1,15 @@ +import styled from "styled-components"; + +const StyledBreadcrumb = styled.ol` + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 0.75rem 0; + margin-bottom: 1rem; + list-style: none; + background-color: #444950; + border-radius: 0.25rem; + justify-content: flex-start; +`; + +export { StyledBreadcrumb }; diff --git a/src/components/Breadcrumbs/BreadcrumbItem.js b/src/components/Breadcrumbs/BreadcrumbItem.js new file mode 100644 index 00000000..920895bb --- /dev/null +++ b/src/components/Breadcrumbs/BreadcrumbItem.js @@ -0,0 +1,12 @@ +import React from "react"; +import { StyledBreadcrumbItem } from "./BreadcrumbItem.styled"; + +const BreadcrumbItem = ({ href, active, children }) => { + return ( + + {href ? {children} : children} + + ); +}; + +export default BreadcrumbItem; diff --git a/src/components/Breadcrumbs/BreadcrumbItem.styled.js b/src/components/Breadcrumbs/BreadcrumbItem.styled.js new file mode 100644 index 00000000..507f16d3 --- /dev/null +++ b/src/components/Breadcrumbs/BreadcrumbItem.styled.js @@ -0,0 +1,23 @@ +import styled from "styled-components"; + +const StyledBreadcrumbItem = styled.li` + display: inline; + margin-right: 0.5rem; + & + &::before { + content: "/"; + padding-right: 0.5rem; + } + & a { + text-decoration: none; + &:hover { + color: #000eee; + text-decoration: underline; + } + } + &.active { + color: #6c757d; + pointer-events: none; + } +`; + +export { StyledBreadcrumbItem }; diff --git a/src/components/Breadcrumbs/index.js b/src/components/Breadcrumbs/index.js new file mode 100644 index 00000000..847a6d26 --- /dev/null +++ b/src/components/Breadcrumbs/index.js @@ -0,0 +1,2 @@ +import Breadcrumb from "./Breadcrumb"; +export default Breadcrumb; From 33684807b30576ca3087cbe6bca30c00151fc9d1 Mon Sep 17 00:00:00 2001 From: Patryk Date: Sun, 23 Jun 2024 21:20:57 +0200 Subject: [PATCH 4/5] Done task 04 --- 04/Task04.js | 75 +++++++++++++++++++++++++----- src/components/Tabs/Tab.js | 24 ++++++++++ src/components/Tabs/Tabs.js | 32 +++++++++++++ src/components/Tabs/Tabs.styled.js | 52 +++++++++++++++++++++ src/components/Tabs/index.js | 3 ++ 5 files changed, 174 insertions(+), 12 deletions(-) create mode 100644 src/components/Tabs/Tab.js create mode 100644 src/components/Tabs/Tabs.js create mode 100644 src/components/Tabs/Tabs.styled.js create mode 100644 src/components/Tabs/index.js diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..319b1fa1 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,80 @@ -import React from 'react'; - -import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +import React from "react"; +import { Tab, Tabs } from "../src/components/Tabs/index"; +import { Row, Col, Tabs as RBTabs, Tab as RBTab } from "react-bootstrap"; const Task04 = () => { return ( - + -

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;

+

+ 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;{" "} +

-

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.

+

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

-

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.

+

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

- Tabs! + + +

+ 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;{" "} +

+ + +

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

+ + +

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

+ + - ) -} - + ); +}; export default Task04; - diff --git a/src/components/Tabs/Tab.js b/src/components/Tabs/Tab.js new file mode 100644 index 00000000..72631658 --- /dev/null +++ b/src/components/Tabs/Tab.js @@ -0,0 +1,24 @@ +import React from "react"; +import { TabButton } from "./Tabs.styled"; + +const Tab = ({ label, active, disabled, children, onClick }) => { + const handleClick = () => { + if (!disabled) { + onClick(label); + } + }; + + return ( + + {label} + + ); +}; + +export default Tab; diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000..a9681aaa --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,32 @@ +import React, { useState } from "react"; +import { TabList, TabsContainer, TabContent } from "./Tabs.styled"; + +const Tabs = ({ children }) => { + const [activeTab, setActiveTab] = useState("Profile"); + + const handleClick = (label) => { + setActiveTab(label); + }; + + return ( + + + {React.Children.map(children, (child) => + React.cloneElement(child, { + active: child.props.label === activeTab, + onClick: handleClick, + }) + )} + + + {children.map((child) => + child.props.label === activeTab + ? child.props.children + : undefined + )} + + + ); +}; + +export default Tabs; diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js new file mode 100644 index 00000000..3bf517d3 --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,52 @@ +import styled from "styled-components"; + +const TabsContainer = styled.div` + padding-left: 0; +`; + +const TabList = styled.ul` + display: flex; + list-style: none; + padding: 0; + margin: 0; + border-bottom: 1px solid #dee2e6; +`; + +const TabButton = styled.button` + padding: 0.5rem 1rem; + border: 1px solid transparent; + border-bottom: none; + cursor: pointer; + background-color: #444950; + margin-bottom: -1px; + border-top-left-radius: 0.25rem; + border-top-right-radius: 0.25rem; + + &:focus { + outline: none; + } + &.active { + color: #495057; + background-color: #fff; + border-color: #dee2e6 #dee2e6 #fff; + } + + &:not(.active) { + color: #007bff; + } + &:not(.active):hover { + border0color: transparent; + color: #0056b3; + } + &.disabled { + color: #6c757d; + cursor: default; + } +`; + +const TabContent = styled.div` + padding: 0; + border-top: none; +`; + +export { TabsContainer, TabList, TabButton, TabContent }; diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000..3e684b0c --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,3 @@ +import Tabs from "./Tabs"; +import Tab from "./Tab"; +export { Tabs, Tab }; From 60aa75dd2273b68a4c5fcdd7e88d3f3c272bf6ce Mon Sep 17 00:00:00 2001 From: Patryk Date: Sun, 23 Jun 2024 21:25:04 +0200 Subject: [PATCH 5/5] Done task 05 --- 05/Task05.js | 24 +++++++------- src/components/App.js | 4 --- src/components/Card/Card.js | 30 ++++++++++++++++++ src/components/Card/Card.styled.js | 51 ++++++++++++++++++++++++++++++ src/components/Card/index.js | 2 ++ 5 files changed, 96 insertions(+), 15 deletions(-) create mode 100644 src/components/Card/Card.js create mode 100644 src/components/Card/Card.styled.js create mode 100644 src/components/Card/index.js diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..9101dd0b 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,31 @@ -import React from 'react'; - -import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; +import React from "react"; +import { Row, Col, Card as RBCard, Button as RBButton } from "react-bootstrap"; +import Card from "../src/components/Card/index"; const Task05 = () => { return ( - - + + Card Title - Some quick example text to build on the card title and make up the bulk of - the card's content. + Some quick example text to build on the card title + and make up the bulk of the card's content. Go somewhere - Card! + - ) -} + ); +}; export default Task05; - diff --git a/src/components/App.js b/src/components/App.js index 94328007..d750957f 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -10,11 +10,7 @@ import Task05 from "./../../05/Task05"; const theme = { primary: "#007bff", - primaryDark: "#0056b3", - primaryHover: "#0069d9", secondary: "#6c757d", - secondaryDark: "#545b62", - secondaryHover: "#5a6268", }; const App = () => { diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..8179593e --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,30 @@ +import React from "react"; +import { + StyledCard, + CardImageTop, + CardBody, + CardTitle, + CardText, + Button, +} from "./Card.styled"; + +const Card = () => { + return ( + + + + Card Title + + Some quick example text to build on the card title and make + up the bulk of the card's content. + + + + + ); +}; + +export default Card; diff --git a/src/components/Card/Card.styled.js b/src/components/Card/Card.styled.js new file mode 100644 index 00000000..6b93d214 --- /dev/null +++ b/src/components/Card/Card.styled.js @@ -0,0 +1,51 @@ +import styled from "styled-components"; + +const StyledCard = styled.div` + border: 1px solid rgba(0, 0, 0, 0.125); + border-radius: 0.25rem; + width: 18rem; + overflow: hidden; +`; + +const CardImageTop = styled.img` + width: 100%; + height: auto; +`; + +const CardBody = styled.div` + padding: 1.25rem; +`; + +const CardTitle = styled.h5` + margin-bottom: 0.75rem; +`; + +const CardText = styled.p` + color: #6c757d; +`; + +const Button = styled.button` + color: #fff; + background-color: #007bff; + border-color: #007bff; + display: inline-block; + font-weight: 400; + text-align: center; + vertical-align: middle; + user-select: none; + background-clip: padding-box; + border: 1px solid transparent; + padding: 0.375rem 0.75rem; + font-size: 1rem; + line-height: 1.5; + border-radius: 0.25rem; + transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, + border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; + + &:hover { + background-color: #0069d9; + border-color: #0062cc; + } +`; + +export { StyledCard, CardImageTop, CardBody, CardTitle, CardText, Button }; diff --git a/src/components/Card/index.js b/src/components/Card/index.js new file mode 100644 index 00000000..af0084fa --- /dev/null +++ b/src/components/Card/index.js @@ -0,0 +1,2 @@ +import Card from "./Card"; +export default Card;