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

Carousel links + press "Enter" to search (pu juste le boutton)

Browse Source
This commit is contained in:
Victor Turgeon
2022-10-30 13:13:34 -07:00
parent 52a890fd6e
commit 2f14c6a842
3 changed files with 27 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
GrossesMitaines/grosses-mitaines-ui/src/components/FeaturedList.js
View File

@@ -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>

15
GrossesMitaines/grosses-mitaines-ui/src/components/ResearchBar.js
View File

@@ -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>