import { ArrowDownWideNarrow, Check, ChevronDown } from "lucide-react"; // types import { TPageFiltersSortBy, TPageFiltersSortKey } from "@plane/types"; // ui import { CustomMenu, getButtonStyling } from "@plane/ui"; // constants import { PAGE_SORTING_KEY_OPTIONS } from "@/constants/page"; // helpers import { cn } from "@/helpers/common.helper"; type Props = { onChange: (value: { key?: TPageFiltersSortKey; order?: TPageFiltersSortBy }) => void; sortBy: TPageFiltersSortBy; sortKey: TPageFiltersSortKey; }; export const PageOrderByDropdown: React.FC<Props> = (props) => { const { onChange, sortBy, sortKey } = props; const orderByDetails = PAGE_SORTING_KEY_OPTIONS.find((option) => sortKey === option.key); const isDescending = sortBy === "desc"; return ( <CustomMenu customButton={ <div className={cn(getButtonStyling("neutral-primary", "sm"), "px-2 text-custom-text-300")}> <ArrowDownWideNarrow className="h-3 w-3" /> {orderByDetails?.label} <ChevronDown className="h-3 w-3" strokeWidth={2} /> </div> } placement="bottom-end" maxHeight="lg" closeOnSelect > {PAGE_SORTING_KEY_OPTIONS.map((option) => ( <CustomMenu.MenuItem key={option.key} className="flex items-center justify-between gap-2" onClick={() => onChange({ key: option.key, }) } > {option.label} {sortKey === option.key && <Check className="h-3 w-3" />} </CustomMenu.MenuItem> ))} <hr className="my-2 border-custom-border-200" /> <CustomMenu.MenuItem className="flex items-center justify-between gap-2" onClick={() => { if (isDescending) onChange({ order: "asc", }); }} > Ascending {!isDescending && <Check className="h-3 w-3" />} </CustomMenu.MenuItem> <CustomMenu.MenuItem className="flex items-center justify-between gap-2" onClick={() => { if (!isDescending) onChange({ order: "desc", }); }} > Descending {isDescending && <Check className="h-3 w-3" />} </CustomMenu.MenuItem> </CustomMenu> ); };