Skip to content

excercises ready to review #73

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wojtekfla wants to merge 5 commits into
base: master
Choose a base branch
from
Open

excercises ready to review #73

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2f52560
complete excercise 1
wojtekfla Apr 25, 2026
0a774fd
complete excercise 2
wojtekfla Apr 26, 2026
f0f6a69
complete excercise 3
wojtekfla Apr 26, 2026
7ff2499
complete excercise 4
wojtekfla Apr 26, 2026
7d821b5
complete excercise 5
wojtekfla Apr 27, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 52 additions & 14 deletions 01/Task01.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,58 @@
import React from 'react';
import React from "react";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";

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 (
<Row>
<Col>
<RBAlert variant="primary">Uwaga! <em>Styled Components</em> nadchodzi!</RBAlert>
</Col>
<Col>
<Alert>Uwaga! <em>Styled Components</em> nadchodzi!</Alert>
</Col>
</Row>
)
}
return (
<>
<Row>
<Col>
<h5>Bootstrap orginał</h5>
<RBAlert variant="primary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.1)
</RBAlert>
<RBAlert variant="secondary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.2)
</RBAlert>
</Col>

<Col>
<h5>Moje komponenty</h5>
<Alert variant="primary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.3)
</Alert>
<Alert variant="secondary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.4)
</Alert>

<ThemeProvider theme={theme}>
<Alert variant="primary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.5)
</Alert>
<Alert variant="secondary">
Uwaga! <em>Styled Components</em> nadchodzi! (1.6)
</Alert>
</ThemeProvider>
</Col>
</Row>
</>
);
};
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


export default Task01;

// <Row>
// <Col>
// <RBAlert variant="primary">
// Uwaga! <em>Styled Components</em> nadchodzi!
// </RBAlert>
// </Col>
// <Col>
// <Alert>
// Uwaga! <em>Styled Components</em> nadchodzi!
// </Alert>
// </Col>
// </Row>
14 changes: 14 additions & 0 deletions 01/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
export const theme = {
colors: {
primary: {
background: "#052c65",
color: "#e9ecef",
border: "#0b396a",
},
secondary: {
background: "#343a40",
color: "#ced4da",
border: "#23272b",
},
},
};
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

100 changes: 85 additions & 15 deletions 02/Task02.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,90 @@
import React from 'react';
import React from "react";

import Button from './../src/components/Button';
import { Row, Col, Button as RBButton } from 'react-bootstrap';
import { Row, Col, Button as RBButton } from "react-bootstrap";
import Button from "./../src/components/Button";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme";

const Task02 = () => {
return (
<Row>
<Col>
<RBButton variant="primary" size="lg">Button!</RBButton>
</Col>
<Col>
Button!
</Col>
</Row>
)
}
return (
<Row>
<Col>
<h5>Bootstrap Button</h5>
<RBButton variant="primary" size="lg">
Large primary
</RBButton>
<RBButton variant="secondary" size="lg">
Large secondary
</RBButton>
<br />
<br />

export default Task02;
<RBButton variant="primary">Default primary</RBButton>
<RBButton variant="secondary">Default secondary</RBButton>
<br />
<br />

<RBButton variant="primary" size="sm">
Small primary
</RBButton>
<RBButton variant="secondary" size="sm">
Small secondary
</RBButton>
<br />
<br />

<RBButton variant="primary" active>
Active
</RBButton>
<RBButton variant="secondary" disabled>
Disabled
</RBButton>
<br />
<br />
</Col>
<Col>
<h5>Moje komponenty</h5>
<Button variant="primary" size="lg">
Large primary
</Button>
<Button variant="secondary" size="lg">
Large secondary
</Button>
<br />
<br />

<Button variant="primary">Default primary</Button>
<Button variant="secondary">Default secondary</Button>
<br />
<br />

<Button variant="primary" size="sm">
Small primary
</Button>
<Button variant="secondary" size="sm">
Small secondary
</Button>
<br />
<br />

<Button variant="primary" active>
Active primary
</Button>
<Button variant="primary" disabled>
Disabled primary
</Button>
<br />
<br />

<ThemeProvider theme={theme}>
<Button variant="primary">Theme primary</Button>
<Button variant="secondary">Theme secondary</Button>
<br />
<br />
</ThemeProvider>
</Col>
</Row>
);
};

export default Task02;
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

18 changes: 18 additions & 0 deletions 02/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
export const theme = {
variants: {
primary: {
background: "#0d6efd",
border: "#0d6efd",
color: "#fff",
hoverBackground: "#0b5ed7",
hoverBorder: "#0a58ca",
},
secondary: {
background: "#6c757d",
border: "#6c757d",
color: "#fff",
hoverBackground: "#5c636a",
hoverBorder: "#565e64",
},
},
};
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

46 changes: 26 additions & 20 deletions 03/Task03.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,31 @@
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/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>
<h5>Bootstrap Breadcrumb</h5>
<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>
<h5>Moje komponenty</h5>
<Breadcrumb>
<Breadcrumb.Item href="#">Home</Breadcrumb.Item>
<Breadcrumb.Item href="#">Library</Breadcrumb.Item>
<Breadcrumb.Item active>Data</Breadcrumb.Item>
</Breadcrumb>
</Col>
</Row>
);
};
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


export default Task03;

85 changes: 61 additions & 24 deletions 04/Task04.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,66 @@
import React from 'react';
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 } from "react-bootstrap";
import Tabs from "./../src/components/Tabs";

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>
<h5>Bootstrap Tabs</h5>
<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>
<h5>Moje komponenty</h5>
<Tabs defaultActiveKey="profile">
<Tabs.Tab eventKey="home" title="Home">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt
laboriosam fugiat ducimus odio excepturi placeat.
</p>
</Tabs.Tab>
<Tabs.Tab eventKey="profile" title="Profile">
<p>
A ullam omnis neque eos, quas, debitis cupiditate vitae amet eaque
aperiam illum accusamus aut ipsum quod repellat error cumque?
</p>
</Tabs.Tab>
<Tabs.Tab eventKey="contact" title="Contact" disabled>
<p>
Recusandae cumque iste modi ab nulla culpa nam alias hic beatae
dolores. Dolore reiciendis obcaecati animi praesentium.
</p>
</Tabs.Tab>
</Tabs>
</Col>
</Row>
);
};
Copy link
Copy Markdown
Owner

@devmentor-pl devmentor-pl Apr 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍


export default Task04;

Loading