'use client';
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
import React from 'react';
import { DragHandleIcon } from '../../icons/DragHandle/index.js';
import './index.scss';
import { useListQuery } from '../../providers/ListQuery/index.js';
const baseClass = 'sort-row';
export const SortRow = ()=>{
    const { orderableFieldName, query } = useListQuery();
    const isActive = query.sort === orderableFieldName || query.sort === `-${orderableFieldName}`;
    return /*#__PURE__*/ _jsxDEV("div", {
        className: `${baseClass} ${isActive ? 'active' : ''}`,
        role: "button",
        tabIndex: 0,
        children: /*#__PURE__*/ _jsxDEV(DragHandleIcon, {
            className: `${baseClass}__icon`
        }, void 0, false, {
            fileName: "src/elements/SortRow/index.tsx",
            lineNumber: 17,
            columnNumber: 7
        }, this)
    }, void 0, false, {
        fileName: "src/elements/SortRow/index.tsx",
        lineNumber: 16,
        columnNumber: 5
    }, this);
};

//# sourceMappingURL=index.js.map