Task Filters

1"use client";
2 
3import * as React from "react";
4import {
5  SlidersHorizontal,
6  Check,
7  Layers,
8  Stars,
9  InfoIcon,
10  Hexagon,
11  Minus,
12  Users,
13  User,
14  UserX,
15} from "lucide-react";
16import { Button } from "@/components/ui/button";
17import {
18  Popover,
19  PopoverContent,
20  PopoverTrigger,
21} from "@/components/ui/popover";
22import { Separator } from "@/components/ui/separator";
23 
24const priorities = [
25  { id: "all", name: "All priorities", icon: Layers },
26  { id: "urgent", name: "Urgent", icon: Stars, color: "text-pink-500" },
27  { id: "high", name: "High", icon: InfoIcon, color: "text-red-500" },
28  { id: "medium", name: "Medium", icon: Hexagon, color: "text-cyan-500" },
29  { id: "low", name: "Low", icon: Minus, color: "text-gray-400" },
30];
31 
32const assignees = [
33  { id: "all", name: "All assignees", icon: Users },
34  { id: "me", name: "Assigned to me", icon: User },
35  { id: "unassigned", name: "Unassigned", icon: UserX },
36];
37 
38export function TaskFilters() {
39  const [open, setOpen] = React.useState(false);
40  const [selectedPriority, setSelectedPriority] = React.useState("all");
41  const [selectedAssignee, setSelectedAssignee] = React.useState("all");
42 
43  return (
44    <Popover open={open} onOpenChange={setOpen}>
45      <PopoverTrigger asChild>
46        <Button variant="secondary" size="sm" className="sm:gap-2">
47          <SlidersHorizontal className="size-4" />
48          <span className="hidden sm:inline">Filter</span>
49        </Button>
50      </PopoverTrigger>
51      <PopoverContent className="w-72 p-4" align="start">
52        <div className="space-y-4">
53          <div>
54            <h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
55              <Layers className="size-4 text-muted-foreground" />
56              Priority
57            </h4>
58            <div className="space-y-1">
59              {priorities.map((priority) => {
60                const Icon = priority.icon;
61                return (
62                  <Button
63                    key={priority.id}
64                    variant="ghost"
65                    size="sm"
66                    className="w-full justify-between h-9 px-3"
67                    onClick={() => setSelectedPriority(priority.id)}
68                  >
69                    <div className="flex items-center gap-2.5">
70                      <Icon
71                        className={`size-4 ${priority.color || "text-muted-foreground"}`}
72                      />
73                      <span className="text-sm">{priority.name}</span>
74// … truncated