Task practice-react-styling done

01/Task01.js

@@ -2,17 +2,46 @@ import React from 'react';
 
 import Alert from './../src/components/Alert';
 import { Row, Col, Alert as RBAlert } from 'react-bootstrap';
+import { ThemeProvider } from 'styled-components';
+
+const theme = {
+    colors: {
+        primary: {
+            background: '#d1ecf1',
+            color: '#0c5460',
+        },
+        secondary: {
+            background: '#f8d7da',
+            color: '#721c24',
+        },
+    },
+};
 
 const Task01 = () => {
+
     return (
-        <Row>
-            <Col>
-                <RBAlert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</RBAlert>
-            </Col>
-            <Col>
-                <Alert>Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
-            </Col>
-        </Row>
+
+        <ThemeProvider theme={theme}>
+            <Row>
+                <Col>
+                    <RBAlert variant="primary">
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </RBAlert>
+                    {/* <RBAlert variant="secondary">
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </RBAlert> */}
+                </Col>
+                <Col>
+                    <Alert type='primary'>
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </Alert>
+                    {/* <Alert type='secondary'>
+                        Uwaga! <em>Styled Components</em> nadchodzi!
+                    </Alert> */}
+                </Col>
+
+            </Row>
+        </ThemeProvider>
     )
 }
 

02/Task02.js

@@ -1,19 +1,48 @@
 import React from 'react';
 
 import Button from './../src/components/Button';
+import { ThemeProvider } from 'styled-components';
 import { Row, Col, Button as RBButton } from 'react-bootstrap';
 
+const theme = {
+    buttons: {
+        primary: {
+            background: '#007bff',
+            color: 'white',
+        },
+        secondary: {
+            background: 'green',
+            color: 'white',
+        },
+    },
+};
+
+
 const Task02 = () => {
-    return (
+    return (<>
         <Row>
             <Col>
                 <RBButton variant="primary" size="lg">Button!</RBButton>
             </Col>
             <Col>
-                Button!
+                <ThemeProvider theme={theme}>
+
+                    <Button variant="primary">Primary</Button>
+
+                    {/* <Button variant="secondary">Secondary</Button> */}
+
+                    {/* <Button size="sm">Small</Button> */}
+
+                    {/* <Button size="lg">Large</Button> */}
+
+                    {/* <Button active>Active</Button> */}
+
+                    {/* <Button disabled>Disabled</Button> */}
+                </ThemeProvider>
             </Col>
         </Row>
-)
+    </>
+    )
 }
 
 export default Task02;

03/Task03.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
+import Breadcrumb from './../src/components/Breadcrumb';
 
 const Task03 = () => {
     return (
@@ -15,10 +16,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,7 @@
 import React from 'react';
 
-import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import { Row, Col, Tabs as RBTabs, Tab as RBTab, Form, } from 'react-bootstrap';
+import { Tab, Tabs } from '../src/components/Tabs'
 
 const Task04 = () => {
     return (
@@ -19,7 +20,22 @@ const Task04 = () => {
                 </RBTabs>
             </Col>
             <Col>
-                Tabs!
+                <Tabs>
+                    <Tab title="Home">
+                        <h3>Home</h3>
+                        <p>This is home content.</p>
+                    </Tab>
+
+                    <Tab title="Profile">
+                        <h3>Profile</h3>
+                        <p>This is profile content.</p>
+                    </Tab>
+
+                    <Tab title="Contact">
+                        <h3>Contact</h3>
+                        <p>This is contact content.</p>
+                    </Tab>
+                </Tabs>
             </Col>
         </Row>
     )

05/Task05.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import Card from '../src/components/Card';
+import Button from './../src/components/Button';
 
 import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
 
@@ -19,11 +21,21 @@ const Task05 = () => {
                 </RBCard>
             </Col>
             <Col>
-                Card!
+                <Card>
+                    <Card.Img 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>Go somewhere</Button>
+                    </Card.Body>
+                </Card>
             </Col>
         </Row>
     )
 }
 
 export default Task05;
-

src/components/Alert/Alert.js

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

src/components/Alert/Alert.styled.js

@@ -2,6 +2,13 @@ import styled from 'styled-components';
 
 const StyledAlert = styled.div`
     display: block;
-`
+    padding: 12px;
+    /* margin: 10px 0; */
+    border-radius: 4px;
+        background-color: ${({ theme, type }) =>
+        theme?.colors?.[type]?.background};
+            color: ${({ theme, type }) =>
+        theme?.colors?.[type]?.color};
+`;
 
 export { StyledAlert };

src/components/Breadcrumb/Breadcrumb.Styled.js

@@ -0,0 +1,49 @@
+import styled, { css } from "styled-components";
+
+export const Nav = styled.nav`
+background-color: #e9ecef;    
+width: 100%; 
+border-radius: 4px;
+`;
+
+export const List = styled.ol`
+    display: flex;
+    align-items: center;
+    list-style: none;
+    margin: 0;
+    padding:12px;
+
+`;
+
+export const Item = styled.li`
+    display: flex;
+    /* background-color: #fff; */
+    align-items: center;
+    font-size: 16px;
+    color: ${({ $active }) => ($active ? "#6c757d" : "#007bff")};
+
+    &:not(:first-child)::before {
+        content: "/";
+        margin: 0 8px;
+        color: #999;
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+
+    a:hover {
+        text-decoration: underline;
+    }
+
+    ${({ $active }) =>
+        $active &&
+        css`
+            font-weight: 600;
+
+            a {
+                pointer-events: none;
+            }
+        `}
+`;

src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,15 @@
+import React from "react";
+import BreadcrumbItem from "./BreadcrumbItem";
+import { Nav, List } from "./Breadcrumb.styled";
+
+const Breadcrumb = ({ children }) => {
+    return (
+        <Nav>
+            <List>{children}</List>
+        </Nav>
+    );
+};
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;

src/components/Breadcrumb/BreadcrumbItem.js

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

src/components/Breadcrumb/index.js

@@ -0,0 +1 @@
+export { default } from "./Breadcrumb";

src/components/Button/Button.js

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

src/components/Button/Button.styled.js

@@ -0,0 +1,72 @@
+import styled, { css } from 'styled-components';
+
+const defaultVariants = {
+    primary: {
+        background: '#007bff',
+        color: '#fff',
+    },
+    secondary: {
+        background: '#6c757d',
+        color: '#fff',
+    },
+};
+
+const defaultSize = {
+    sm: {
+        padding: '4px 10px',
+        fontSize: '12px',
+    },
+    md: {
+        padding: '8px 16px',
+        fontSize: '14px',
+    },
+    lg: {
+        padding: '12px 20px',
+        fontSize: '16px',
+    }
+}
+
+const getVariant = ({ theme, variant }) =>
+    theme?.buttons?.[variant] || defaultVariants[variant] || defaultVariants.primary;
+
+const getSize = ({ size }) =>
+    defaultSize[size] || defaultSize.md;
+
+const StyledButton = styled.button`
+display: inline-block;
+text-align: center;
+border: none;
+border-radius: 4px;
+cursor: pointer;
+background-color:${({ theme, variant }) =>
+        getVariant({ theme, variant }).background};
+    color:${({ theme, variant }) =>
+        getVariant({ theme, variant }).color};        
+    ${({ size }) => {
+        const s = getSize({ size });
+        return css`
+    padding: ${s.padding};
+    font-size: ${s.fontSize};
+    transition: 0.2s ease;
+
+    &:hover {
+  opacity: 0.9;
+}
+    `;
+    }}
+
+    ${({ active }) =>
+        active &&
+        css`
+            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
+        `}
+
+    ${({ disabled }) =>
+        disabled &&
+        css`
+            opacity: 0.6;
+            cursor: not-allowed;
+        `}
+`;
+
+export { StyledButton };