64 lines
2.4 KiB
JavaScript
64 lines
2.4 KiB
JavaScript
import Dropdown from 'react-bootstrap/Dropdown'
|
|
import { useState } from 'react';
|
|
|
|
const Sorting = ({onChange}) => {
|
|
|
|
const [currentSort, setSort] = useState("...");
|
|
|
|
return (
|
|
<>
|
|
<Dropdown className='sorting-dropdown'>
|
|
<Dropdown.Toggle id="dropdown-sort">
|
|
{currentSort}
|
|
</Dropdown.Toggle>
|
|
|
|
<Dropdown.Menu className='sorting-menu'>
|
|
<Dropdown.Item key="0" onClick={() => {
|
|
setSort("Prix ascendants"); // Mets le nom afficher quand le dropdown est fermé
|
|
onChange("Price"); // Trigger le handler pour trier
|
|
}}>
|
|
Prix ascendants {/*Le nom de l'option*/}
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="1" onClick={() => {
|
|
setSort(" Prix déscendants");
|
|
onChange("PriceDesc");
|
|
}}>
|
|
Prix déscendants
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="2" onClick={() => {
|
|
setSort("Titre a -> z");
|
|
onChange("Title");
|
|
}}>
|
|
Titre a -{'>'} z
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="3" onClick={() => {
|
|
setSort("Titre z -> a");
|
|
onChange("TitleDesc");
|
|
}}>
|
|
Titre z -{'>'} a
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="4" onClick={() => {
|
|
setSort("Catégorie a -> z");
|
|
onChange("Category");
|
|
}}>
|
|
Catégorie a -{'>'} z
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="5" onClick={() => {
|
|
setSort("Catégorie z -> a");
|
|
onChange("CategoryDesc");
|
|
}}>
|
|
Catégorie z -{'>'} a
|
|
</Dropdown.Item>
|
|
<Dropdown.Item key="6" onClick={() => {
|
|
setSort("...");
|
|
onChange("");
|
|
}}>
|
|
...
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Sorting; |