You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
2.1 KiB
59 lines
2.1 KiB
import {buildShopParamsGET, findQueryParamsValue, getShopSortList, SortType} from "../../libs/utils";
|
|
import BlogPagination from "../blog-pagination/blog-pagination";
|
|
import {useRouter} from "next/router";
|
|
|
|
/* eslint-disable-next-line */
|
|
export interface ShopCatalogProps {
|
|
}
|
|
|
|
export function ShopCatalog({
|
|
queries = [],
|
|
products = [],
|
|
paginator = {pagination: {}}
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
const sortCatalog = (event) => {
|
|
const value = event.target.value;
|
|
router.push(`${router.pathname}${buildShopParamsGET(
|
|
value as SortType,
|
|
findQueryParamsValue(queries, 'page'),
|
|
findQueryParamsValue(queries, 'range'),
|
|
findQueryParamsValue(queries, 'cat'),
|
|
findQueryParamsValue(queries, 'filters'),
|
|
findQueryParamsValue(queries, 'search')
|
|
)}`);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<header className="flex flex-col items-end w-full">
|
|
<div className="max-w-[300px] text-right">
|
|
<select id="countries"
|
|
value={findQueryParamsValue(queries, 'sort')}
|
|
onChange={sortCatalog}
|
|
className="border text-sm rounded-lg block w-full p-2.5
|
|
bg-white border-gray-300 text-gray-900
|
|
focus:ring-blue-500 focus:border-blue-500
|
|
dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
|
|
|
|
{getShopSortList().map((val, index: number) => (
|
|
<option key={'sort-' + index}
|
|
value={val.value}>{val.label}</option>))}
|
|
</select>
|
|
</div>
|
|
</header>
|
|
<hr className="border-gray-200 dark:border-gray-700 w-full mt-3 mb-5" />
|
|
<main>
|
|
{products && products.length === 0 && (<p>Il n'y aucun produit pour l'instant</p>)}
|
|
{products && products.length > 0 && (<p>Produit</p>)}
|
|
</main>
|
|
<footer className="mt-10">
|
|
<BlogPagination paginator={paginator} />
|
|
</footer>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ShopCatalog;
|