commit of tasks

.npmrc

@@ -0,0 +1 @@
+# prefix=C:\Users\daopalka\AppData\Roaming\npm

01/Task01.js

@@ -7,14 +7,17 @@ const Task01 = () => {
     return (
         <Row>
             <Col>
-                <RBAlert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</RBAlert>
+                <RBAlert variant="primary">
+                    Uwaga! <em>Styled Components</em> nadchodzi!
+                </RBAlert>
             </Col>
             <Col>
-                <Alert>Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
+                <Alert variant="primary">
+                    Uwaga! <em>Styled Components</em> nadchodzi!
+                </Alert>
             </Col>
         </Row>
-    )
-}
-
-export default Task01;
+    );
+};
 
+export default Task01;

02/Task02.js

@@ -1,20 +1,23 @@
+// ./02/Task02.js
 import React from 'react';
-
 import Button from './../src/components/Button';
 import { Row, Col, Button as RBButton } from 'react-bootstrap';
 
 const Task02 = () => {
     return (
         <Row>
             <Col>
-                <RBButton variant="primary" size="lg">Button!</RBButton>
+                <RBButton variant="primary" size="lg" active>
+                    React Bootstrap
+                </RBButton>
             </Col>
             <Col>
-                Button!
+                <Button variant="primary" size="lg" active>
+                    Custom Button
+                </Button>
             </Col>
         </Row>
-)
-}
+    );
+};
 
 export default Task02;
-

03/Task03.js

@@ -1,6 +1,8 @@
+// ./03/Task03.js
 import React from 'react';
 
 import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
+import Breadcrumb from './../src/components/Breadcrumb';
 
 const Task03 = () => {
     return (
@@ -15,11 +17,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;
-

05/Task05.js

@@ -1,29 +1,33 @@
+// ./05/Task05.js
 import React from 'react';
-
-import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap';
+import Card from './../src/components/Card';
+import Button from './../src/components/Button';
+import { Row, Col } from 'react-bootstrap';
 
 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>
+                <h4>React Bootstrap Card</h4>
+                {/* Możesz tutaj umieścić przykładową kartę z React Bootstrap */}
             </Col>
             <Col>
-                Card!
+                <h4>Custom Card</h4>
+                <Card>
+                    <Card.Img src="https://via.placeholder.com/300x150" alt="Example image" />
+                    <Card.Body>
+                        <Card.Title>Card Title</Card.Title>
+                        <Card.Text>
+                            This is a simple card example created using React and styled-components.
+                        </Card.Text>
+                        <Button variant="primary" size="sm">
+                            Go somewhere
+                        </Button>
+                    </Card.Body>
+                </Card>
             </Col>
         </Row>
-    )
-}
+    );
+};
 
 export default Task05;
-

src/components/Alert/Alert.styled.js

@@ -2,6 +2,25 @@ import styled from 'styled-components';
 
 const StyledAlert = styled.div`
     display: block;
-`
+    padding: 1rem;
+    margin-bottom: 1rem;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+
+    background-color: ${({ theme, variant }) => 
+        theme.colors?.[variant] || defaultColors[variant]};
+    color: ${({ theme, variant }) => 
+        theme.textColors?.[variant] || defaultTextColors[variant]};
+`;
+
+const defaultColors = {
+    primary: '#cce5ff',
+    secondary: '#e2e3e5',
+};
+
+const defaultTextColors = {
+    primary: '#004085',
+    secondary: '#383d41',
+};
 
 export { StyledAlert };

src/components/App.js

@@ -1,5 +1,6 @@
 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';
@@ -8,25 +9,37 @@ import Task04 from './../../04/Task04';
 import Task05 from './../../05/Task05';
 
 
+const theme = {
+    colors: {
+        primary: '#b3d9ff', 
+        secondary: '#d6d8db',
+    },
+    textColors: {
+        primary: '#003366', 
+        secondary: '#2e2e2e',
+    },
+};
+
 const App = () => {
     return (
-        <>
+        <ThemeProvider theme={theme}>
             <Container fluid>
                 <Row>
                     <Col>
-                        <h2>Komponenty React Boostrap</h2></Col>
+                        <h2>Komponenty React Boostrap</h2>
+                    </Col>
                     <Col>
                         <h2>Komponenty Twoje</h2>
                     </Col>
                 </Row>
-                <Task01/>
-                <Task02/>
-                <Task03/>
-                <Task04/>
-                <Task05/>
+                <Task01 />
+                <Task02 />
+                <Task03 />
+                <Task04 />
+                <Task05 />
             </Container>
-        </>
-    )
-}
+        </ThemeProvider>
+    );
+};
 
-export default App;
+export default App;

src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,9 @@
+// ./src/components/Breadcrumb/Breadcrumb.js
+import React from 'react';
+import { StyledBreadcrumb } from './Breadcrumb.styled';
+
+const Breadcrumb = ({ children, ...props }) => {
+    return <StyledBreadcrumb {...props}>{children}</StyledBreadcrumb>;
+};
+
+export default Breadcrumb;

src/components/Breadcrumb/Breadcrumb.styled.js

@@ -0,0 +1,44 @@
+// ./src/components/Breadcrumb/Breadcrumb.styled.js
+import styled from 'styled-components';
+
+const StyledBreadcrumb = styled.nav`
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0.5rem 1rem;
+    margin-bottom: 1rem;
+    list-style: none;
+    background-color: ${({ theme }) => theme.colors?.secondary || '#f8f9fa'};
+    border-radius: 0.25rem;
+`;
+
+const StyledBreadcrumbItem = styled.li`
+    display: inline;
+    font-size: 1rem;
+
+    &::after {
+        content: '/';
+        margin: 0 0.5rem;
+        color: ${({ theme }) => theme.colors?.primary || '#6c757d'};
+    }
+
+    &:last-child::after {
+        content: '';
+    }
+
+    ${({ active }) =>
+        active &&
+        `
+        color: ${({ theme }) => theme.colors?.primary || '#6c757d'};
+        font-weight: bold;
+    `}
+`;
+
+const StyledBreadcrumbLink = styled.a`
+    text-decoration: none;
+    color: ${({ theme }) => theme.colors?.primary || '#007bff'};
+    &:hover {
+        text-decoration: underline;
+    }
+`;
+
+export { StyledBreadcrumb, StyledBreadcrumbItem, StyledBreadcrumbLink };

src/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,21 @@
+// ./src/components/Breadcrumb/BreadcrumbItem.js
+import React from 'react';
+import { StyledBreadcrumbItem, StyledBreadcrumbLink } from './Breadcrumb.styled';
+
+const BreadcrumbItem = ({ href, active, children, ...props }) => {
+    if (active) {
+        return (
+            <StyledBreadcrumbItem active {...props}>
+                {children}
+            </StyledBreadcrumbItem>
+        );
+    }
+
+    return (
+        <StyledBreadcrumbItem {...props}>
+            <StyledBreadcrumbLink href={href}>{children}</StyledBreadcrumbLink>
+        </StyledBreadcrumbItem>
+    );
+};
+
+export default BreadcrumbItem;

src/components/Breadcrumb/index.js

@@ -0,0 +1,7 @@
+// ./src/components/Breadcrumb/index.js
+import Breadcrumb from './Breadcrumb';
+import BreadcrumbItem from './BreadcrumbItem';
+
+Breadcrumb.Item = BreadcrumbItem;
+
+export default Breadcrumb;

src/components/Button/Button.js

@@ -0,0 +1,19 @@
+// ./src/components/Button/Button.js
+import React from 'react';
+import { StyledButton } from './Button.styled';
+
+const Button = ({ children, variant = 'primary', size = 'md', active, disabled, ...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,63 @@
+// ./src/components/Button/Button.styled.js
+import styled, { css } from 'styled-components';
+
+const sizeStyles = {
+    sm: css`
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+    `,
+    md: css`
+        padding: 0.5rem 1rem;
+        font-size: 1rem;
+    `,
+    lg: css`
+        padding: 0.75rem 1.25rem;
+        font-size: 1.25rem;
+    `,
+};
+
+const StyledButton = styled.button`
+    display: inline-block;
+    font-weight: 400;
+    text-align: center;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    border-radius: 0.25rem;
+    transition: all 0.15s ease-in-out;
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+
+    /* Warianty przycisków */
+    background-color: ${({ theme, variant }) =>
+        theme.colors?.[variant] || defaultColors[variant]};
+    color: ${({ theme, variant }) => theme.textColors?.[variant] || defaultTextColors[variant]};
+
+    /* Styl dla aktywnego przycisku */
+    ${({ active }) =>
+        active &&
+        css`
+            opacity: 0.85;
+        `}
+
+    /* Styl dla wyłączonego przycisku */
+    ${({ disabled }) =>
+        disabled &&
+        css`
+            opacity: 0.65;
+        `}
+
+    /* Rozmiary przycisku */
+    ${({ size }) => sizeStyles[size] || sizeStyles.md};
+`;
+
+const defaultColors = {
+    primary: '#007bff',
+    secondary: '#6c757d',
+};
+
+const defaultTextColors = {
+    primary: '#fff',
+    secondary: '#fff',
+};
+
+export { StyledButton };

src/components/Button/index.js

@@ -0,0 +1,4 @@
+// ./src/components/Button/index.js
+import Button from './Button';
+
+export default Button;