Finish

01/Task01.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import Alert from './../src/components/Alert';
+import Alert from './../src/components/Alert/index';
 import { Row, Col, Alert as RBAlert } from 'react-bootstrap';
 
 const Task01 = () => {

02/Task02.js

@@ -1,6 +1,5 @@
 import React from 'react';
-
-import Button from './../src/components/Button';
+import Button from './../src/components/Button/index';
 import { Row, Col, Button as RBButton } from 'react-bootstrap';
 
 const Task02 = () => {
@@ -10,10 +9,10 @@ const Task02 = () => {
                 <RBButton variant="primary" size="lg">Button!</RBButton>
             </Col>
             <Col>
-                Button!
+                <Button variant="primary" size="lg">Button!</Button>
             </Col>
         </Row>
-)
+    )
 }
 
 export default Task02;

03/Task03.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Breadcrumb from './../src/components/Breadcrumb/index';
 import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
 
 const Task03 = () => {
@@ -15,10 +15,16 @@ const Task03 = () => {
                 </RBBreadcrumb>
             </Col>
             <Col>
-                Breadcrumb!
+            <Breadcrumb>
+                <Breadcrumb.Item href="#">Home</Breadcrumb.Item>
+                <Breadcrumb.Item href="https://getbootstrap.com/docs/4.0/components/breadcrumb/">
+                    Library
+                </Breadcrumb.Item>
+                <Breadcrumb.Item active>Data</Breadcrumb.Item>
+            </Breadcrumb>
             </Col>
         </Row>
-)
+    )
 }
 
 export default Task03;

04/Task04.js

@@ -1,6 +1,6 @@
 import React from 'react';
-
-import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import { Tab, Tabs } from '../src/components/Tabs/index'
+import { Row, Col, Tabs as RBTabs, Tab as RBTab } from 'react-bootstrap';
 
 const Task04 = () => {
     return (
@@ -19,7 +19,17 @@ const Task04 = () => {
                 </RBTabs>
             </Col>
             <Col>
-                Tabs!
+                <Tabs>
+                    <Tab label="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>
+                    </Tab>
+                    <Tab label="Profile" active>
+                        <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>
+                    </Tab>
+                    <Tab label="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>
+                    </Tab>
+                </Tabs>
             </Col>
         </Row>
     )

05/Task05.js

@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Card from '../src/components/Card/index';
 import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
 
 const Task05 = () => {
@@ -19,7 +19,7 @@ const Task05 = () => {
                 </RBCard>
             </Col>
             <Col>
-                Card!
+                <Card/>
             </Col>
         </Row>
     )

package.json

@@ -27,6 +27,6 @@
     "react": "^18.2.0",
     "react-bootstrap": "^1.0.0",
     "react-dom": "^18.2.0",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.11"
   }
 }

src/components/Alert/Alert.js

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { StyledAlert } from './Alert.styled';
 
-const Alert = props => {
+const Alert = ({ variant, children }) => {
     return (
-        <StyledAlert>{props.children}</StyledAlert>
+        <StyledAlert variant={variant}>{children}</StyledAlert>
     );
 }
 

src/components/Alert/Alert.styled.js

@@ -1,7 +1,13 @@
 import styled from 'styled-components';
 
 const StyledAlert = styled.div`
-    display: block;
-`
+    padding: 0.75rem 1.25rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    color: #004085;
+    background-color: ${props => props.theme[props.variant] || '#cce5ff'};
+    border-color: ${props => props.theme[props.variant] || '#b8daff'};
+`;
 
 export { StyledAlert };

src/components/Alert/index.js

@@ -1,4 +1,2 @@
 import Alert from './Alert';
-
-
 export default Alert;

src/components/App.js

@@ -1,16 +1,24 @@
 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 theme = {
+    primary: '#007bff',
+    primaryDark: '#0056b3',
+    primaryHover: '#0069d9',
+    secondary: '#6c757d',
+    secondaryDark: '#545b62',
+    secondaryHover: '#5a6268',
+};
 
 const App = () => {
     return (
-        <>
+        <ThemeProvider theme={theme}>
             <Container fluid>
                 <Row>
                     <Col>
@@ -25,7 +33,7 @@ const App = () => {
                 <Task04/>
                 <Task05/>
             </Container>
-        </>
+        </ThemeProvider>
     )
 }
 

src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,11 @@
+import React from "react";
+import {StyledBreadcrumb} from "./Breadcrumb.styled";
+import BreadcrumbItem from "./BreadcrumbItem";
+
+const Breadcrumb = ({ children }) => {
+    return <StyledBreadcrumb aria-label="breadcrumb"><ol>{children}</ol></StyledBreadcrumb>;
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;

src/components/Breadcrumb/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: #e9ecef;
+	border-radius: 0.25rem;
+    justify-content: flex-start;
+`;
+
+export { StyledBreadcrumb };

src/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,12 @@
+import React from "react";
+import { StyledBreadcrumbItem } from "./BreadcrumbItem.styled";
+
+const BreadcrumbItem = ({ href, active, children }) => {
+    return (
+        <StyledBreadcrumbItem active={active}>
+            {href ? <a href={href}>{children}</a> : children}
+        </StyledBreadcrumbItem>
+    );
+};
+
+export default BreadcrumbItem;

src/components/Breadcrumb/BreadcrumbItem.styled.js

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+
+const StyledBreadcrumbItem = styled.li`
+    display: inline;
+    margin-right: 0.5rem; 
+
+    & + &::before {
+        content: "/"; 
+        padding-right: 0.5rem;
+    }
+
+    & a {
+        color: #007bff;
+        text-decoration: none;
+
+        &:hover {
+            color: #0056b3;
+            text-decoration: underline;
+        }
+    }
+
+    &.active {
+        color: #6c757d;
+        pointer-events: none;
+    }
+`;
+
+export { StyledBreadcrumbItem };

src/components/Breadcrumb/index.js

@@ -0,0 +1,2 @@
+import Breadcrumb from './Breadcrumb';
+export default Breadcrumb;

src/components/Button/Button.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledButton } from './Button.styled';
+
+const Button = ({ variant, size, active, disabled, children }) => {
+    return (
+        <StyledButton variant={variant} size={size} active={active} disabled={disabled}>
+            {children}
+        </StyledButton>
+    );
+}
+
+export default Button;

src/components/Button/Button.styled.js

@@ -0,0 +1,23 @@
+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] || '#007bff'};
+    border: 1px solid ${props => props.theme[props.variant] || '#007bff'};
+    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')};
+
+    &:active {
+        background-color: ${props => props.active ? props.theme[props.variant + 'Dark'] : props.theme[props.variant]};
+    }
+
+    &:hover {
+        background-color: ${props => !props.disabled && props.theme[props.variant + 'Hover']};
+    }
+`;
+
+export { StyledButton };

src/components/Button/index.js

@@ -0,0 +1,2 @@
+import Button from './Button';
+export default Button;

src/components/Card/Card.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { StyledCard, CardImageTop, CardBody, CardTitle, CardText, Button} from "./Card.styled";
+
+const Card = () => {
+    return (
+        <StyledCard>
+            <CardImageTop src="https://picsum.photos/100/80" alt="Card image cap" />
+            <CardBody>
+                <CardTitle>Card Title</CardTitle>
+                <CardText>
+                        Some quick example text to build on the card title and make up the bulk of
+                        the card's content.
+                </CardText>
+                <Button>Go somewhere</Button>
+            </CardBody>
+        </StyledCard>
+    )
+}
+
+export default Card;

src/components/Card/Card.styled.js

@@ -0,0 +1,50 @@
+import styled from "styled-components";
+
+const StyledCard = styled.div`
+    border: 1px solid rgba(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 };

src/components/Card/index.js

@@ -0,0 +1,2 @@
+import Card from './Card';
+export default Card;