diff --git a/app/routes/search.$query.tsx b/app/routes/search.$query.tsx index 8051b38..9d09bb9 100644 --- a/app/routes/search.$query.tsx +++ b/app/routes/search.$query.tsx @@ -6,6 +6,8 @@ import { PackageSearch } from "lucide-react"; import { useSearchInfinite } from "../requestHandler/use-search-hooks"; import MondrianProductList from "~/components/MondrianProductList"; import SearchTopBar from "~/components/SearchTopBar"; +import SellerLogo from "~/components/SellerLogo"; +import HorizontalCollectionsList from "~/components/HorizontalCollectionsList"; export default function Search() { const { query } = useParams(); @@ -30,6 +32,13 @@ export default function Search() { isFetchingNextPage, } = useSearchInfinite(query); + // Sellers & collections are the same for every page of a query, so read them + // off the first page. Products paginate as usual. + const firstPage = data?.pages?.[0]; + const sellers = firstPage?.sellers ?? []; + const collections = firstPage?.collections ?? []; + const hasNonProduct = sellers.length > 0 || collections.length > 0; + return (
@@ -57,6 +66,49 @@ export default function Search() {
+ {/* Sellers */} + {sellers.length > 0 && ( +
+

فروشگاه‌ها

+
+ {sellers.map((seller) => ( + + +

+ {seller.name} +

+ + ))} +
+
+ )} + + {/* Collections */} + {collections.length > 0 && ( +
+

کالکشن‌ها

+ ({ + id: c.id, + title: c.title, + coverImageUrl: c.coverImageUrl, + productCount: c.productCount, + }))} + isLoading={false} + isError={false} + refetch={refetch} + /> +
+ )} + + {hasNonProduct && ( +

محصولات

+ )} + ; + /** + * Public collections matching the query. + * @type {Array} + * @memberof SearchResponse + */ + collections?: Array; +} +/** + * A collection result in search. + * @export + * @interface CollectionSearchResult + */ +export interface CollectionSearchResult { + type?: string; + id: string; + title: string; + coverImageUrl?: string | null; + productCount?: number; } /** * @@ -5546,6 +5564,12 @@ export interface SellerSearchResult { * @memberof SellerSearchResult */ id: string; + /** + * Store logo URL (may be null). + * @type {string} + * @memberof SellerSearchResult + */ + logo?: string | null; } /** *