react-version #1
@ -5,6 +5,7 @@ import AboutUs from "../pages/AboutUs";
|
||||
import Privacy from "../pages/Privacy";
|
||||
import ContactUs from "../pages/ContactUs";
|
||||
import Morceaux from "../pages/Morceaux";
|
||||
import MorceauDetail from "../pages/MorceauDetail";
|
||||
|
||||
const App = () => {
|
||||
|
||||
@ -17,6 +18,7 @@ const App = () => {
|
||||
<Route path="aboutUs" element={<AboutUs/>} />
|
||||
<Route path="contactUs" element={<ContactUs/>}/>
|
||||
<Route path="privacy" element={<Privacy/>}/>
|
||||
<Route path="morceaux/:id" element={<MorceauDetail/>}/>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
@ -1,5 +1,6 @@
|
||||
import { Button } from 'react-bootstrap';
|
||||
import Item from './Item';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const ItemList = ({ items }) => {
|
||||
|
||||
@ -7,12 +8,15 @@ const ItemList = ({ items }) => {
|
||||
<>
|
||||
<div className='item-list'>
|
||||
{items.map((item) =>
|
||||
<Item imageUrl={item.imageUrl}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
status={item.status}
|
||||
newPrice={item.newPrice}
|
||||
/>
|
||||
<Link className='item-link' to={`/morceaux/${item.id}`}>
|
||||
<Item key={item.id} imageUrl={item.imageUrl}
|
||||
name={item.name}
|
||||
price={item.price}
|
||||
status={item.status}
|
||||
newPrice={item.newPrice}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
|
@ -0,0 +1,19 @@
|
||||
import { useEffect } from "react";
|
||||
import {useParams} from "react-router-dom";
|
||||
|
||||
const MorceauDetail = () => {
|
||||
|
||||
const {id} = useParams();
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Morceaux';
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>{id}</p>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MorceauDetail;
|
@ -345,6 +345,11 @@ html {
|
||||
|
||||
}
|
||||
|
||||
.item-link, .item-link:hover{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.btn-primary{
|
||||
background-color: purple;
|
||||
|
Loading…
Reference in New Issue
Block a user