ptorrel/JS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Browse Source
This commit is contained in:
Philippe Torrel
2026-10-23 13:07:02 +02:00
parent 72ee23c158
commit 5739309790
6 changed files with 165 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
06_react/unterricht/tag35/01_reusable-components/src/App.jsx
+14 -10
View File
@@ -1,4 +1,5 @@
import Button from './components/buttons/Button';
import FooterMain from './components/footers/FooterMain';
import HeaderMain from './components/headers/HeaderMain';
import InputAmount from './components/inputs/InputAmount';
@@ -8,17 +9,20 @@ function App(props) {
return (
<>
<HeaderMain />
<div className="container py-5">
<h2>Reusable Components</h2>
<main id="main">
<div className="container py-5">
<h2>Reusable Components</h2>
<InputAmount />
<hr />
<Button variant="primary">New Styled Button</Button>
<br />
<Button variant="dark">Button 2</Button>
<br />
<Button>Button 3</Button>
</div>
<InputAmount />
<hr />
<Button variant="primary">New Styled Button</Button>
<br />
<Button variant="dark">Button 2</Button>
<br />
<Button>Button 3</Button>
</div>
</main>
<FooterMain />
</>
);
}
06_react/unterricht/tag35/01_reusable-components/src/components/footers/FooterMain.jsx
+78
View File
@@ -0,0 +1,78 @@
const FooterMain = (props) => {
// const { } = props;
return (
<footer className="m-footer-main footer-main">
<div className="container">
<div className="row">
<div className="col-12 col-md-4">
<div className="mb-3">
<h3>Address</h3>
<address>
John Wick
<br />
Musterstr. 33
<br />
5555 Frankfurt
<br />
Germany
</address>
</div>
</div>
<div className="col-12 col-md-4">
<div className="mb-3">
<h3>Links</h3>
{/* nav.menu-footer>ul.list>li*2>a[href="#"]{Link $} */}
<nav className="menu-footer">
<ul className="list">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
</ul>
</nav>
</div>
</div>
<div className="col-12 col-md-4">
<div className="mb-3">
<h3>Socials</h3>
{/* nav.menu-social>ul.list>li*5>a[href="#"]>span{Link $} */}
<nav className="menu-social">
<ul className="list">
<li>
<a href="#">
<span>X (Twitter)</span>
</a>
</li>
<li>
<a href="#">
<span>Instagram</span>
</a>
</li>
<li>
<a href="#">
<span>Medium</span>
</a>
</li>
<li>
<a href="#">
<span>Twitch</span>
</a>
</li>
<li>
<a href="#">
<span>Youtube</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</footer>
);
};
export default FooterMain;
06_react/unterricht/tag35/01_reusable-components/src/styles/03_base/_theme.scss
+21 -1
View File
@@ -7,9 +7,29 @@ html {
}
html,
body {
body,
#root,
#app {
height: 100%;
}
// Sticky Footer
body,
#root,
#app {
display: flex;
flex-direction: column;
}
main,
#main {
flex: 1 0 auto;
}
body > footer,
.footer-main {
flex-shrink: 0;
}
// sticky end
body {
margin: 0;
06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_footerMain.scss
+45
View File
@@ -0,0 +1,45 @@
@use '../03_base/colors' as *;
.footer-main {
background-color: $color-black;
background: $linear-gradient-dark;
padding: 3rem 0;
[class^='col'] {
color: $color-white;
a {
color: $color-white;
}
h2,
h3,
h4,
h5,
h6 {
font-size: 1.5rem;
color: $color-2;
padding: 0.5rem 0;
margin-bottom: 1rem;
letter-spacing: 2px;
}
}
// Mobile First
.row {
flex-direction: column;
> div {
&:nth-child(1) {
order: 3;
}
&:nth-child(2) {
order: 2;
}
&:nth-child(3) {
order: 1;
}
}
}
@media (min-width: 992px) {
// @include media-breakpoint-up(md) {
.row {
flex-direction: row;
}
}
}
06_react/unterricht/tag35/01_reusable-components/src/styles/05_modules/_index.scss
+1
View File
@@ -1,5 +1,6 @@
@forward 'button';
// @forward 'chuck-norris-joke';
@forward 'footerMain';
@forward 'header-main';
@forward 'input-amount';
@forward 'logo-main';
06_react/unterricht/tag35/meeting.md
+6
View File
@@ -0,0 +1,6 @@
# Meeting Fr. 23.10.2026
- [ ] Benjamin 14:20 - 14:30
- [ ] Christian 14:30 - 14:40
- [ ] Florian 14:40 - 14:50
- [ ] Stefan 14:50 - 15:00