Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 292x 292x 292x 292x 292x 21x 292x 292x 869x | import { Settings2 } from "lucide-react";
import { useLocalStorage } from "usehooks-ts";
import { Button } from "@/ahuora-design-system/ui/button";
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuRadioItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/ahuora-design-system/ui/dropdown-menu";
import {
MainPageContentConfig,
MainPageContentTypes,
} from "@/pages/main-page/components/MainPageContentDefinitions";
export default function SortDropdown({
currentContent,
}: {
currentContent: MainPageContentConfig;
}) {
const isBinPage = currentContent.type === MainPageContentTypes.binned;
const isTemplatesPage = currentContent.type === MainPageContentTypes.template;
const sortByData = ["Recently Created", "Recently Edited", "A-Z"];
const sortByDataBin = ["Recently Binned", "A-Z"];
const sortOptions = isBinPage
? sortByDataBin
: isTemplatesPage
? sortByData.filter((s) => s !== "Recently Edited")
: sortByData;
const [sortOrder, setSortOrder] = useLocalStorage(
currentContent.sortStorageKey,
currentContent.sortStorageValue,
);
return (
<DropdownMenu>
<DropdownMenuTrigger asChild aria-label="main-content-sort">
<Button variant="tertiary" size="navIcon">
<Settings2 className="icon-large" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuLabel>Sort by</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup
value={sortOrder}
onValueChange={(value) => {
setSortOrder(value);
}}
>
{sortOptions.map((sortData) => (
<DropdownMenuRadioItem key={sortData} value={sortData}>
<span className="capitalize">{sortData}</span>
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
}
|