memartel_loc/GGMM
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Not quite the style yet... But!

Browse Source
This commit is contained in:
DavidBelisle 2022-10-14 23:36:59 -04:00
parent 1f7c97949d
commit 355e1761b4
8 changed files with 104 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
GrossesMitaines/grosses-mitaines-ui/src/components/App.js
View File

@ -4,6 +4,7 @@ import Home from "../pages/Home";
import AboutUs from "../pages/AboutUs";
import Privacy from "../pages/Privacy";
import ContactUs from "../pages/ContactUs";
import Morceaux from "../pages/Morceaux";
const App = () => {
@ -12,6 +13,7 @@ const App = () => {
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="morceaux" element={<Morceaux/>} />
<Route path="aboutUs" element={<AboutUs/>} />
<Route path="contactUs" element={<ContactUs/>}/>
<Route path="privacy" element={<Privacy/>}/>

6
GrossesMitaines/grosses-mitaines-ui/src/components/Footer.js
View File

@ -30,9 +30,9 @@ const Footer = () => {
<h6 className="footer-partner-title">- Nos partenaires -</h6>
</div>
<div className="footer-partners">
<img className="partner-img" src={LogoSqdc} />
<img className="partner-img" src={LogoGov} />
<img className="partner-img" src={LogoTG} />
<img className="partner-img" src={LogoSqdc} alt=""/>
<img className="partner-img" src={LogoGov} alt=""/>
<img className="partner-img" src={LogoTG} alt=""/>
</div>
<div className="footer-copyrights">
&copy; 2022 - Les Grosses Mitaines à Ginette et Monique, inc.

18
GrossesMitaines/grosses-mitaines-ui/src/components/Item.js Normal file
View File

@ -0,0 +1,18 @@
const Item = ({ imageUrl, name, price, status }) => {
return (
<div className="row item">
<div className="col-md-2">
<img src={imageUrl} alt={name} height="150" />
</div>
<div className="col-md-8 item-detail">
<h4>{name}</h4>
<div dangerouslySetInnerHTML={{ __html: status }}></div>
</div>
<div className="col-md-2 item-price">
{price}
</div>
</div>
);
}
export default Item;

18
GrossesMitaines/grosses-mitaines-ui/src/components/ItemList.js Normal file
View File

@ -0,0 +1,18 @@
import Item from './Item';
const ItemList = ({ items }) => {
return (
<div>
{items.map((item) =>
<Item imageUrl={item.imageUrl}
name={item.name}
price={item.price}
status={item.status}
/>
)}
</div>
)
}
export default ItemList;

5
GrossesMitaines/grosses-mitaines-ui/src/components/Topbar.js
View File

@ -10,7 +10,7 @@ const Topbar = () => {
<Navbar expand="sm" className="topbar-container">
<Container>
<Link className="navbar-brand" to="/">
<img src="/images/LesGrossesMitaines.png" height="45"/>
<img src="/images/LesGrossesMitaines.png" alt="" height="45"/>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
@ -18,6 +18,9 @@ const Topbar = () => {
<Link className="nav-link" to="/" >
Maison
</Link>
<Link className="nav-link" to="/morceaux" >
Morceaux
</Link>
<Link className="nav-link" to="/aboutUs" >
À propos de nous
</Link>

8
GrossesMitaines/grosses-mitaines-ui/src/pages/AboutUs.js
View File

@ -2,7 +2,7 @@ import React from "react";
import { useEffect } from "react";
import ContactInfo from "../components/ContactInfo";
const AbtouUs = () => {
const AboutUs = () => {
useEffect(() => {
document.title = 'À propos de nous';
@ -18,7 +18,7 @@ const AbtouUs = () => {
<br />
<div className="row">
<div className="col col-12 col-md-6 col-lg-4 ">
<img className="border-quetaine" src="/images/madamebrossard.jpg"/>
<img className="border-quetaine" src="/images/madamebrossard.jpg" alt=""/>
</div>
<div className="col col-12 col-md-6 col-lg-8 employee-text">
<br />
@ -50,7 +50,7 @@ const AbtouUs = () => {
<br />
</div>
<div className="col col-12 col-md-6 col-lg-4">
<img className="border-quetaine" src="/images/moman.jpg"/>
<img className="border-quetaine" src="/images/moman.jpg" alt=""/>
</div>
</div>
<br />
@ -62,4 +62,4 @@ const AbtouUs = () => {
);
}
export default AbtouUs;
export default AboutUs;

39
GrossesMitaines/grosses-mitaines-ui/src/pages/Morceaux.js Normal file
View File

@ -0,0 +1,39 @@
import { useEffect } from "react";
import ItemList from "../components/ItemList";
const Morceaux = () => {
const products = [
{
"name": "Ceinture flèchée",
"status": "Disponible!",
"price": "85,86",
"imageUrl": "/images/ceintureflechee.jpg"
},
{
"name": "Pantoufles du Canadien en Phentex",
"status": "Non disponible...",
"price": "15,64",
"imageUrl": "/images/pantouflesCH.jpg"
},
{
"name": "Jean-Luc Mongrain",
"status": "Disponible!",
"price": "1453,12",
"imageUrl": "/images/jeanlucmongrain.jpg"
}
];
useEffect(() => {
document.title = 'Morceaux';
});
return (
<div className="morceaux-container">
<h3>QWERTY</h3>
<ItemList items={products} />
</div>
);
}
export default Morceaux;

16
GrossesMitaines/grosses-mitaines-ui/src/stylesheets/site.css
View File

@ -200,6 +200,22 @@ html {
}
.item {
border: 5px purple double;
border-radius: 5px;
padding: 1rem 0;
margin: 1rem 0;
}
.item-detail {
padding: 0 2rem;
}
.item-price {
font-weight: bold;
font-size: 140%;
}
/* -------------------------------------------------------- */
/* specification pour les écrans plus petits / cells */