Task Sidebar

1"use client";
2 
3import {
4  Bell,
5  LayoutGrid,
6  Circle,
7  Star,
8  FileCheck,
9  FileText,
10  Calendar,
11  Users,
12  Building,
13  ChevronDown,
14  Paperclip,
15  Folder,
16  Mail,
17  HelpCircle,
18  ArrowUpRight,
19  Layers,
20  CreditCard,
21  Navigation,
22  Search,
23  Check,
24  Plus,
25} from "lucide-react";
26import { cn } from "@/lib/utils";
27import {
28  Sidebar,
29  SidebarContent,
30  SidebarFooter,
31  SidebarHeader,
32} from "@/components/ui/sidebar";
33import {
34  DropdownMenu,
35  DropdownMenuContent,
36  DropdownMenuItem,
37  DropdownMenuSeparator,
38  DropdownMenuTrigger,
39} from "@/components/ui/dropdown-menu";
40import Image from "next/image";
41import { Input } from "@/components/ui/input";
42import { Button } from "@/components/ui/button";
43import Link from "next/link";
44import { Kbd } from "@/components/ui/kbd";
45 
46interface SidebarItemProps {
47  icon: React.ReactNode;
48  label: string;
49  badge?: string;
50  active?: boolean;
51}
52 
53function SidebarItem({ icon, label, badge, active }: SidebarItemProps) {
54  return (
55    <Button
56      variant="ghost"
57      className={cn(
58        "w-full justify-between px-3 py-2 h-auto text-sm",
59        active
60          ? "bg-muted text-foreground font-medium"
61          : "text-muted-foreground hover:bg-muted/50 hover:text-foreground"
62      )}
63    >
64      <div className="flex items-center gap-3">
65        {icon}
66        <span>{label}</span>
67      </div>
68      {badge && (
69        <div className="bg-red-500 text-white text-xs rounded-full size-5 flex items-center justify-center">
70          {badge}
71        </div>
72      )}
73    </Button>
74  );
75}
76 
77function SidebarSection({
78  title,
79  children,
80}: {
81  title: string;
82  children: React.ReactNode;
83}) {
84  return (
85    <div className="mb-6">
86      <Button
87        variant="ghost"
88        className="gap-2 px-1 mb-2 text-xs h-auto py-0 text-muted-foreground hover:text-foreground"
89      >
90        <span>{title}</span>
91        <ChevronDown className="size-3" />
92      </Button>
93      <div className="space-y-0.5">{children}</div>
94    </div>
95  );
96}
97 
98export function TaskSidebar({
99  ...props
100}: React.ComponentProps<typeof Sidebar>) {
101  return (
102    <Sidebar collapsible="offcanvas" {...props}>
103      <SidebarHeader className="pb-0">
104        <div className="px-4 pt-4 pb-0">
105          <div className="flex items-center justify-between">
106            <DropdownMenu>
107              <DropdownMenuTrigger asChild>
108                <Button
109                  variant="ghost"
110                  className="flex items-center gap-3 h-auto p-0! hover:bg-transparent"
111// … truncated