Task Sort

1"use client";
2 
3import * as React from "react";
4import {
5  ListFilter,
6  Check,
7  CircleDot,
8  Flag,
9  Calendar,
10  User,
11  ArrowDownAZ,
12} from "lucide-react";
13import { Button } from "@/components/ui/button";
14import {
15  DropdownMenu,
16  DropdownMenuContent,
17  DropdownMenuItem,
18  DropdownMenuLabel,
19  DropdownMenuSeparator,
20  DropdownMenuTrigger,
21} from "@/components/ui/dropdown-menu";
22 
23const sortOptions = [
24  { id: "status", name: "Sort by status", icon: CircleDot },
25  { id: "priority", name: "Sort by priority", icon: Flag },
26  { id: "date", name: "Sort by date", icon: Calendar },
27  { id: "assignee", name: "Sort by assignee", icon: User },
28  { id: "alphabetical", name: "Sort alphabetically", icon: ArrowDownAZ },
29];
30 
31export function TaskSort() {
32  const [selectedSort, setSelectedSort] = React.useState("status");
33 
34  return (
35    <DropdownMenu>
36      <DropdownMenuTrigger asChild>
37        <Button variant="secondary" size="sm" className="sm:gap-2">
38          <ListFilter className="size-4" />
39          <span className="hidden sm:inline">Sort</span>
40        </Button>
41      </DropdownMenuTrigger>
42      <DropdownMenuContent align="start" className="w-56">
43        <DropdownMenuLabel className="flex items-center gap-2">
44          <ListFilter className="size-4" />
45          Sort options
46        </DropdownMenuLabel>
47        <DropdownMenuSeparator />
48        {sortOptions.map((option) => {
49          const Icon = option.icon;
50          return (
51            <DropdownMenuItem
52              key={option.id}
53              onClick={() => setSelectedSort(option.id)}
54              className="flex items-center justify-between gap-2"
55            >
56              <div className="flex items-center gap-2.5">
57                <Icon className="size-4 text-muted-foreground" />
58                <span>{option.name}</span>
59              </div>
60              {selectedSort === option.id && (
61                <Check className="size-4 text-primary" />
62              )}
63            </DropdownMenuItem>
64          );
65        })}
66      </DropdownMenuContent>
67    </DropdownMenu>
68  );
69}
70