Emails Horizontal Navigation

1"use client";
2 
3import {
4  MailPlusIcon,
5  InboxIcon,
6  SendIcon,
7  FileSpreadsheetIcon,
8  StarIcon,
9  ArchiveIcon,
10  Trash2Icon,
11  FileWarningIcon,
12  AsteriskIcon,
13  MenuIcon,
14} from "lucide-react";
15import { Button } from "@/components/ui/button";
16import { Separator } from "@/components/ui/separator";
17import { useEmailsStore } from "@/store/emails-store";
18import { cn } from "@/lib/utils";
19import {
20  DropdownMenu,
21  DropdownMenuContent,
22  DropdownMenuItem,
23  DropdownMenuSeparator,
24  DropdownMenuTrigger,
25} from "@/components/ui/dropdown-menu";
26 
27export function EmailsHorizontalNav() {
28  const { emails, currentFolder, setFolder } = useEmailsStore();
29 
30  const mainFolders = [
31    {
32      id: "inbox",
33      label: "Inbox",
34      icon: InboxIcon,
35      count: emails.length.toString() as string | undefined,
36    },
37    { id: "sent", label: "Sent items", icon: SendIcon, count: undefined },
38    {
39      id: "drafts",
40      label: "Drafts",
41      icon: FileSpreadsheetIcon,
42      count: undefined,
43    },
44    { id: "starred", label: "Favorites", icon: StarIcon, count: undefined },
45    { id: "archive", label: "Archive", icon: ArchiveIcon, count: undefined },
46  ];
47 
48  const additionalFolders = [
49    { id: "deleted", label: "Deleted", icon: Trash2Icon, count: undefined },
50    { id: "spam", label: "Spam", icon: FileWarningIcon, count: undefined },
51    { id: "junk", label: "Junk", icon: AsteriskIcon, count: undefined },
52  ];
53 
54  const allFolders = [...mainFolders, ...additionalFolders];
55 
56  return (
57    <div className="flex h-[54px] items-center border-b border-border bg-background px-3 md:px-4">
58      <div className="flex items-center gap-2 md:gap-3 w-full">
59        <Button
60          size="sm"
61          className="relative h-[30px] shrink-0 overflow-hidden bg-linear-to-r from-white to-white hover:opacity-90"
62        >
63          <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,rgba(205,175,250,1),transparent_50%),radial-gradient(ellipse_at_bottom_right,rgba(129,169,248,1),transparent_50%),radial-gradient(ellipse_at_top_left,rgba(247,203,191,1),transparent_50%),radial-gradient(ellipse_at_bottom_left,rgba(164,252,245,1),transparent_50%)]" />
64          <MailPlusIcon className="relative size-4 text-black" />
65          <span className="relative hidden sm:inline text-black">Compose</span>
66        </Button>
67 
68        <Separator orientation="vertical" className="h-5 hidden sm:block" />
69 
70        <div className="hidden 2xl:flex items-center gap-2.5 flex-1">
71// … truncated