sitecore-search-with-google-map/dist/components/SortOrder/index.js

A library for seamless integration of Sitecore Search with Google Maps in Next.js applications, enabling location-based searches with flexible UI options.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSearchResultsActions } from "@sitecore-search/react";
import { SortSelect } from "@sitecore-search/ui";
var SortOrder = function (_a) {
    var _b;
    var options = _a.options, selected = _a.selected;
    var selectedSortIndex = options.findIndex(function (s) { return s.name === selected; });
    var onSortChange = useSearchResultsActions().onSortChange;
    return (_jsxs(SortSelect.Root, { defaultValue: (_b = options[selectedSortIndex]) === null || _b === void 0 ? void 0 : _b.name, onValueChange: onSortChange, children: [_jsxs(SortSelect.Trigger, { className: "cursor-pointer [&_span]:w-max [&_span]:text-[16px] text-black inline-flex items-center bg-transparent gap-1 py-1 px-4 py-[20px] border-0 focus:outline-none", children: [_jsx(SortSelect.SelectValue, { children: _jsx("p", { className: "w-max", children: selectedSortIndex > -1 ? options[selectedSortIndex].label : "" }) }), _jsx(SortSelect.Icon, {})] }), _jsx(SortSelect.Content, { className: "bg-gray-100 dark:bg-gray-700 shadow-[2px_2px_4px_#CFCFCF] z-[100] absolute top-8 focus-within:border-gray-700 min-w-[150px] rounded-md", children: _jsx(SortSelect.Viewport, { className: "p-1 z-[50000]", children: options.map(function (option) { return (_jsx(SortSelect.Option, { value: option, className: "flex rounded-sm items-center p-1 m-1 leading-none cursor-pointer select-none whitespace-no-wrap h-6 px-1 hover:bg-gray-700 dark:hover:bg-gray-100 hover:text-gray-100 dark:hover:text-gray-700 data-[state=checked]:text-gray-700 data-[state=checked]:bg-white focus:outline-gray-700", children: _jsx(SortSelect.OptionText, { children: option.label }) }, option.name)); }) }) })] }));
};
export default SortOrder;