Carousel links + press "Enter" to search (pu juste le boutton)
This commit is contained in:
parent
52a890fd6e
commit
2f14c6a842
@ -1,11 +1,14 @@
|
|||||||
import { Carousel } from "react-bootstrap";
|
import { Carousel } from "react-bootstrap";
|
||||||
|
import { Link } from "react-router-dom";
|
||||||
const FeaturedList = ({ products }) => {
|
const FeaturedList = ({ products }) => {
|
||||||
if (products === null)
|
if (products === null)
|
||||||
return (<></>);
|
return (<></>);
|
||||||
return (
|
return (
|
||||||
<Carousel variant="dark" className="featured-lst">
|
<Carousel variant="dark" className="featured-lst">
|
||||||
{products.map((product) => (
|
{products.map((product) => (
|
||||||
|
|
||||||
<Carousel.Item key={product.id} className="featured-itm">
|
<Carousel.Item key={product.id} className="featured-itm">
|
||||||
|
<Link key={product.id} to={`/morceaux/${product.id}`}>
|
||||||
<img
|
<img
|
||||||
className="featured-img"
|
className="featured-img"
|
||||||
src={`/images/${product.imageName}.jpg`}
|
src={`/images/${product.imageName}.jpg`}
|
||||||
@ -16,6 +19,7 @@ const FeaturedList = ({ products }) => {
|
|||||||
<h5>Seulement</h5>
|
<h5>Seulement</h5>
|
||||||
<h4 className="featured-prc">{product.promoPrice} $ CA</h4>
|
<h4 className="featured-prc">{product.promoPrice} $ CA</h4>
|
||||||
</Carousel.Caption>
|
</Carousel.Caption>
|
||||||
|
</Link>
|
||||||
</Carousel.Item>
|
</Carousel.Item>
|
||||||
))}
|
))}
|
||||||
</Carousel>
|
</Carousel>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useEffect } from 'react';
|
||||||
|
|
||||||
|
|
||||||
const ResearchBar = () => {
|
const ResearchBar = () => {
|
||||||
@ -8,8 +8,9 @@ const ResearchBar = () => {
|
|||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [value, setValue] = useState("");
|
const [value, setValue] = useState("");
|
||||||
|
|
||||||
|
|
||||||
const search = async (query) => {
|
const search = async (query) => {
|
||||||
navigate('/morceaux', { state: { query: query} });
|
navigate('/morceaux', { state: { query: query } });
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleValueChange = async (value) => {
|
const handleValueChange = async (value) => {
|
||||||
@ -18,7 +19,15 @@ const ResearchBar = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="research-container">
|
<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)}>
|
<button className="research-btn" onClick={() => search(value)}>
|
||||||
<div className="fa fa-search" />
|
<div className="fa fa-search" />
|
||||||
</button>
|
</button>
|
||||||
|
@ -31,7 +31,6 @@ const Morceaux = () => {
|
|||||||
|
|
||||||
const response = await fetch(url);
|
const response = await fetch(url);
|
||||||
const json = await response.json();
|
const json = await response.json();
|
||||||
if (json.length > 0)
|
|
||||||
setProducts([...json]);
|
setProducts([...json]);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -123,11 +122,6 @@ const Morceaux = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
<div className={isLoading ? "cat-load" : "d-none cat-load"} />
|
||||||
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
<script type="text/javascript" async src="https://tenor.com/embed.js"></script>
|
||||||
{/* <div>
|
|
||||||
{!isSearch && <Button onClick={handleNextItems} className='btn-load-more'>
|
|
||||||
...
|
|
||||||
</Button>}
|
|
||||||
</div> */}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user