zadania

01/src/Alert.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StyledAlert } from './Alert.styled';
+
+const Alert = ({ children, variant = 'primary' }) => {
+  return (
+    <StyledAlert variant={variant}>
+      {children}
+    </StyledAlert>
+  );
+};
+
+export default Alert;

01/src/Alert.styled.js

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+
+const defaultColors = {
+  primary: {
+    background: '#cfe2ff',
+    text: '#084298',
+    border: '#b6d4fe',
+  },
+  secondary: {
+    background: '#e2e3e5',
+    text: '#41464b',
+    border: '#d3d6d8',
+  },
+};
+
+export const StyledAlert = styled.div`
+  ${({ theme, variant = 'primary' }) => {
+  const colors =
+      theme?.alert?.[variant] || defaultColors[variant];
+       return `
+      padding: 16px;
+      border-radius: 4px;
+      background-color: ${colors.background};
+      color: ${colors.text};
+      border: 1px solid ${colors.border};
+     `;
+  }}
+`;

01/src/index.js

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

02/Task02.js

@@ -1,20 +1,24 @@
 import React from 'react';
-
-import Button from './../src/components/Button';
+import Button, { ButtonThemeProvider } 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>
-            </Col>
-            <Col>
-                Button!
-            </Col>
-        </Row>
-)
-}
-
-export default Task02;
+  return (
+    <ButtonThemeProvider>
+      <Row>
+        <Col>
+          <RBButton variant='primary' size='lg'>
+            RB Button!
+          </RBButton>
+        </Col>
+        <Col>
+          <Button variant='primary' size='lg' active>
+            Custom Button!
+          </Button>
+        </Col>
+      </Row>
+    </ButtonThemeProvider>
+  );
+};
 
+export default Task02;

02/src/components/Button/Button.js

@@ -0,0 +1,30 @@
+import React, { useContext } from 'react';
+import { ButtonThemeContext } from './ButtonThemeProvider';
+import { getButtonStyles } from './Button.styles';
+
+const Button = ({
+    children,
+    variant = 'primary',
+    size = 'sm',
+    active = false,
+    disabled = false,
+    ...rest
+}) => {
+    const theme = useContext(ButtonThemeContext);
+
+    const styles = getButtonStyles({
+        variant,
+        size,
+        active,
+        disabled,
+        theme,
+    });
+
+    return (
+        <button style={styles} disabled={disabled} {...rest}>
+            {children}
+        </button>
+    );
+};
+
+export default Button;

02/src/components/Button/Button.styles.js

@@ -0,0 +1,22 @@
+export const getButtonStyles = ({
+    variant,
+    size,
+    active,
+    disabled,
+    theme,
+}) => {
+    const variantStyles = theme.variants[variant];
+    const sizeStyles = theme.sizes[size];
+
+    return {
+        backgroundColor: variantStyles.background,
+        color: variantStyles.color,
+        padding: sizeStyles.padding,
+        fontSize: sizeStyles.fontSize,
+        border: 'none',
+        borderRadius: '0.375rem',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        opacity: disabled ? 0.6 : 1,
+        boxShadow: active ? 'inset 0 3px 5px rgba(0,0,0,.125)' : 'none',
+    };
+};

02/src/components/Button/ButtonThemeProvider.js

@@ -0,0 +1,36 @@
+import React, { createContext } from 'react';
+
+export const ButtonThemeContext = createContext();
+
+const defaultTheme = {
+    variants: {
+        primary: {
+            background: '#0d6efd',
+            color: '#fff',
+        },
+        secondary: {
+            background: '#6c757d',
+            color: '#fff',
+        },
+    },
+    sizes: {
+        sm: {
+            padding: '0.25rem 0.5rem',
+            fontSize: '0.875rem',
+        },
+        lg: {
+            padding: '0.5rem 1rem',
+            fontSize: '1.25rem',
+        },
+    },
+};
+
+const ButtonThemeProvider = ({ theme = defaultTheme, children }) => {
+    return (
+        <ButtonThemeContext.Provider value={theme}>
+            {children}
+        </ButtonThemeContext.Provider>
+    );
+};
+
+export default ButtonThemeProvider;

02/src/components/Button/index.js

@@ -0,0 +1,2 @@
+export { default } from './Button';
+export { default as ButtonThemeProvider } from './ButtonThemeProvider';

03/Task03.js

@@ -1,25 +1,26 @@
 import React from 'react';
+import { Row, Col } from 'react-bootstrap';
 
-import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap';
+import Breadcrumb from './src/components/Breadcrumb';
 
 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>
-                Breadcrumb!
-            </Col>
-        </Row>
-)
-}
+  return (
+    <Row>
+      <Col>
+        <Breadcrumb>
+          <Breadcrumb.Item href='#'>Home</Breadcrumb.Item>
 
-export default Task03;
+          <Breadcrumb.Item href='https://getbootstrap.com/docs/4.0/components/breadcrumb/'>
+            Library
+          </Breadcrumb.Item>
+
+          <Breadcrumb.Item active>Data</Breadcrumb.Item>
+        </Breadcrumb>
+      </Col>
 
+      <Col>Breadcrumb!</Col>
+    </Row>
+  );
+};
+
+export default Task03;

03/src/components/Breadcrumb/Breadcrumb.js

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

03/src/components/Breadcrumb/BreadcrumbItem.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+
+const BreadcrumbItem = ({ href, active, children }) => {
+
+    if (active) {
+        return (
+            <li className="breadcrumb-item active" aria-current="page">
+                {children}
+            </li>
+        );
+    }
+
+    return (
+        <li className="breadcrumb-item">
+            <a href={href}>
+                {children}
+            </a>
+        </li>
+    );
+};
+
+export default BreadcrumbItem;

03/src/components/Breadcrumb/index.js

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

04/Task04.js

@@ -1,29 +1,40 @@
 import React from 'react';
+import { Row, Col } from 'react-bootstrap';
 
-import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap';
+import Tabs from './src/components/Tabs/Tabs';
+import Tab from './src/components/Tabs/Tab';
 
 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!
-            </Col>
-        </Row>
-    )
-}
+  return (
+    <Row>
+      <Col>
+        <Tabs defaultActiveKey='profile'>
+          <Tab eventKey='home' title='Home'>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+              condimentum lacus nec ligula faucibus rhoncus.
+            </p>
+          </Tab>
 
-export default Task04;
+          <Tab eventKey='profile' title='Profile'>
+            <p>
+              Donec dignissim ultricies felis, eu dictum eros congue in. In
+              gravida lobortis libero nec tempus.
+            </p>
+          </Tab>
 
+          <Tab eventKey='contact' title='Contact' disabled>
+            <p>
+              Vivamus metus nulla, fermentum eget placerat vitae, mollis
+              interdum elit.
+            </p>
+          </Tab>
+        </Tabs>
+      </Col>
+
+      <Col>Tabs!</Col>
+    </Row>
+  );
+};
+
+export default Task04;

04/src/components/Tabs/Tab.css

@@ -0,0 +1,28 @@
+.tabs__nav {
+    display: flex;
+    gap: 8px;
+    margin-bottom: 16px;
+}
+
+.tabs__button {
+    padding: 8px 16px;
+    border: 1px solid #ccc;
+    background: #f5f5f5;
+    cursor: pointer;
+}
+
+.tabs__button.active {
+    background: #007bff;
+    color: white;
+    border-color: #007bff;
+}
+
+.tabs__button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.tabs__content {
+    padding: 16px;
+    border: 1px solid #ccc;
+}

04/src/components/Tabs/Tab.js

@@ -0,0 +1,6 @@
+const Tab = ({ children }) => {
+
+    return children;
+};
+
+export default Tab;