import cn from 'classnames' import type { SearchPropsType } from '@lib/search-props' import Link from 'next/link' import { useState } from 'react' import { useRouter } from 'next/router' import { Layout } from '@components/common' import { ProductCard } from '@components/product' import type { Product } from '@commerce/types/product' import { Container, Skeleton } from '@components/ui' import useSearch from '@framework/product/use-search' import getSlug from '@lib/get-slug' import rangeMap from '@lib/range-map' const SORT = { 'trending-desc': 'Trending', 'latest-desc': 'Latest arrivals', 'price-asc': 'Price: Low to high', 'price-desc': 'Price: High to low', } import { filterQuery, getCategoryPath, getDesignerPath, useSearchMeta, } from '@lib/search' export default function Search({ categories, brands }: SearchPropsType) { const [activeFilter, setActiveFilter] = useState('') const [toggleFilter, setToggleFilter] = useState(false) const router = useRouter() const { asPath, locale } = router const { q, sort } = router.query // `q` can be included but because categories and designers can't be searched // in the same way of products, it's better to ignore the search input if one // of those is selected const query = filterQuery({ sort }) const { pathname, category, brand } = useSearchMeta(asPath) const activeCategory = categories.find((cat: any) => cat.slug === category) const activeBrand = brands.find( (b: any) => getSlug(b.node.path) === `brands/${brand}` )?.node const { data } = useSearch({ search: typeof q === 'string' ? q : '', categoryId: activeCategory?.id, brandId: (activeBrand as any)?.entityId, sort: typeof sort === 'string' ? sort : '', locale, }) const handleClick = (event: any, filter: string) => { if (filter !== activeFilter) { setToggleFilter(true) } else { setToggleFilter(!toggleFilter) } setActiveFilter(filter) } return (
{/* Categories */}
{/* Designs */}
{/* Products */}
{(q || activeCategory || activeBrand) && (
{data ? ( <> Showing {data.products.length} results{' '} {q && ( <> for "{q}" )} {q ? ( <> There are no products that match "{q}" ) : ( <> There are no products that match the selected category. )} ) : q ? ( <> Searching for: "{q}" ) : ( <>Searching... )}
)} {data ? (
{data.products.map((product: Product) => ( ))}
) : (
{rangeMap(12, (i) => (
))}
)}{' '}
{/* Sort */}
) } Search.Layout = Layout