import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { SearchForm } from "../../block/markets/sections/search";
import { MarketListView } from "../../block/markets/sections/listView";
import { useDataSource } from "./useDataSource";
export const Markets = (props)=>{
    const [dataSource, { searchKey, onSearch, onSort }] = useDataSource(props.dataSource);
    return /*#__PURE__*/ _jsxs(_Fragment, {
        children: [
            /*#__PURE__*/ _jsx("h3", {
                id: "orderly-markets-sheet-title",
                className: "orderly-text-lg orderly-text-base-contrast orderly-py-3",
                children: "Markets"
            }),
            /*#__PURE__*/ _jsx(SearchForm, {
                onChange: onSearch,
                value: searchKey
            }),
            /*#__PURE__*/ _jsx(MarketListView, {
                dataSource: dataSource,
                onItemClick: props.onItemClick,
                onSort: onSort,
                listHeight: props.listHeight
            })
        ]
    });
};

//# sourceMappingURL=markets.js.map