Emails Header

1"use client";
2 
3import {
4  MailIcon,
5  Link2Icon,
6  WandSparklesIcon,
7  MoreVerticalIcon,
8  MenuIcon,
9  Github,
10} from "lucide-react";
11import { Button } from "@/components/ui/button";
12import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
13import { ThemeToggle } from "@/components/theme-toggle";
14import {
15  DropdownMenu,
16  DropdownMenuContent,
17  DropdownMenuItem,
18  DropdownMenuSeparator,
19  DropdownMenuTrigger,
20} from "@/components/ui/dropdown-menu";
21import { useEmailsStore } from "@/store/emails-store";
22import Link from "next/link";
23 
24interface EmailsHeaderProps {
25  onMobileMenuClick?: () => void;
26}
27 
28export function EmailsHeader({ onMobileMenuClick }: EmailsHeaderProps) {
29  const { emails } = useEmailsStore();
30  return (
31    <div className="flex h-14 items-center justify-between border-b border-border bg-background px-3 md:px-6">
32      <div className="flex flex-1 items-center gap-2 md:gap-4">
33        <Button
34          variant="ghost"
35          size="icon-sm"
36          className="md:hidden"
37          onClick={onMobileMenuClick}
38        >
39          <MenuIcon className="size-5" />
40        </Button>
41 
42        <div className="flex items-center gap-2 md:gap-2.5">
43          <MailIcon className="size-4 text-foreground" />
44          <p className="text-sm md:text-base font-normal tracking-tight text-foreground">
45            Emails
46          </p>
47        </div>
48        <div className="hidden sm:flex items-center gap-2.5">
49          <div className="size-1 rounded-full bg-muted-foreground/20" />
50          <p className="text-sm md:text-base font-normal tracking-tight text-foreground">
51            {emails.length} emails
52          </p>
53        </div>
54      </div>
55 
56      <div className="hidden md:flex items-center gap-4">
57        <div className="flex items-center gap-2">
58          <p className="text-[13px] text-muted-foreground">
59            Last update 3 days ago
60          </p>
61          <div className="flex items-center">
62            {[1, 2, 3, 4].map((i) => (
63              <Avatar
64                key={i}
65                className="-ml-2 size-5 border-2 border-background first:ml-0"
66              >
67                <AvatarImage
68                  src={`https://api.dicebear.com/9.x/glass/svg?seed=User${i}`}
69                />
70                <AvatarFallback>U{i}</AvatarFallback>
71              </Avatar>
72            ))}
73          </div>
74        </div>
75 
76        <div className="flex items-center gap-2">
77          <ThemeToggle />
78// … truncated