react-version #1
@ -1,21 +1,25 @@
|
||||
import { Carousel } from "react-bootstrap";
|
||||
import { Link } from "react-router-dom";
|
||||
const FeaturedList = ({ products }) => {
|
||||
if (products === null)
|
||||
return (<></>);
|
||||
return (
|
||||
<Carousel variant="dark" className="featured-lst">
|
||||
{products.map((product) => (
|
||||
|
||||
<Carousel.Item key={product.id} className="featured-itm">
|
||||
<img
|
||||
className="featured-img"
|
||||
src={`/images/${product.imageName}.jpg`}
|
||||
/>
|
||||
<Carousel.Caption className="featured-info">
|
||||
<h3>{product.title}</h3>
|
||||
<p>{product.description}</p>
|
||||
<h5>Seulement</h5>
|
||||
<h4 className="featured-prc">{product.promoPrice} $ CA</h4>
|
||||
</Carousel.Caption>
|
||||
<Link key={product.id} to={`/morceaux/${product.id}`}>
|
||||
<img
|
||||
className="featured-img"
|
||||
src={`/images/${product.imageName}.jpg`}
|
||||
/>
|
||||
<Carousel.Caption className="featured-info">
|
||||
<h3>{product.title}</h3>
|
||||
<p>{product.description}</p>
|
||||
<h5>Seulement</h5>
|
||||
<h4 className="featured-prc">{product.promoPrice} $ CA</h4>
|
||||
</Carousel.Caption>
|
||||
</Link>
|
||||
</Carousel.Item>
|
||||
))}
|
||||
</Carousel>
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { useEffect } from 'react';
|
||||
|
||||
|
||||
const ResearchBar = () => {
|
||||
@ -8,8 +8,9 @@ const ResearchBar = () => {
|
||||
const navigate = useNavigate();
|
||||
const [value, setValue] = useState("");
|
||||
|
||||
|
||||
const search = async (query) => {
|
||||
navigate('/morceaux', { state: { query: query} });
|
||||
navigate('/morceaux', { state: { query: query } });
|
||||
}
|
||||
|
||||
const handleValueChange = async (value) => {
|
||||
@ -18,7 +19,15 @@ const ResearchBar = () => {
|
||||
|
||||
return (
|
||||
<div className="research-container">
|
||||
<input className="research-input" value={value} onChange={(e) => handleValueChange(e.target.value)} placeholder="Rechercher..."></input>
|
||||
<input className="research-input"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
search(value);
|
||||
}
|
||||
}}
|
||||
value={value}
|
||||
onChange={(e) => handleValueChange(e.target.value)}
|
||||
placeholder="Rechercher..."></input>
|
||||
<button className="research-btn" onClick={() => search(value)}>
|
||||
<div className="fa fa-search" />
|
||||
</button>
|
||||
|
@ -31,8 +31,7 @@ const Morceaux = () => {
|
||||
|
||||
const response = await fetch(url);
|
||||
const json = await response.json();
|
||||
if (json.length > 0)
|
||||
setProducts([...json]);
|
||||
setProducts([...json]);
|
||||
}
|
||||
|
||||
|
||||
@ -123,11 +122,6 @@ const Morceaux = () => {
|
||||
</div>
|
||||
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
||||
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||
{/* <div>
|
||||
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
|
||||
...
|
||||
</Button>}
|
||||
</div> */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user