Emails Vertical Sidebar

1"use client";
2 
3import {
4  SparklesIcon,
5  GalleryVerticalEndIcon,
6  MailIcon,
7  FolderClosedIcon,
8  AudioLinesIcon,
9  GitForkIcon,
10  FilesIcon,
11  ShieldIcon,
12  UnplugIcon,
13  LifeBuoyIcon,
14} from "lucide-react";
15import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
16import { Button } from "@/components/ui/button";
17import {
18  Tooltip,
19  TooltipContent,
20  TooltipTrigger,
21} from "@/components/ui/tooltip";
22import { cn } from "@/lib/utils";
23 
24interface EmailsVerticalSidebarProps {
25  onItemClick?: () => void;
26}
27 
28export function EmailsVerticalSidebar({
29  onItemClick,
30}: EmailsVerticalSidebarProps = {}) {
31  const topIcons = [
32    { icon: SparklesIcon, label: "Sparkles", active: false },
33    { icon: GalleryVerticalEndIcon, label: "Gallery", active: false },
34    { icon: MailIcon, label: "Mail", active: true },
35    { icon: FolderClosedIcon, label: "Folders", active: false },
36    { icon: AudioLinesIcon, label: "Audio", active: false },
37    { icon: GitForkIcon, label: "Git", active: false },
38    { icon: FilesIcon, label: "Files", active: false },
39  ];
40 
41  const bottomIcons = [
42    { icon: ShieldIcon, label: "Shield" },
43    { icon: UnplugIcon, label: "Unplug" },
44    { icon: LifeBuoyIcon, label: "Help" },
45  ];
46 
47  return (
48    <div className="flex h-screen w-14 flex-col items-center gap-4 border-r border-border bg-background py-4">
49      <Button
50        variant="default"
51        size="icon-sm"
52        className="relative mb-2 size-8 overflow-hidden rounded-lg bg-linear-to-br from-white via-purple-200 to-blue-200 hover:opacity-90"
53      >
54        <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%)]" />
55        <svg className="relative size-4" viewBox="0 0 16 16" fill="none">
56          <path
57            d="M8 2L2 8L8 14"
58            stroke="black"
59            strokeWidth="2"
60            strokeLinecap="round"
61            strokeLinejoin="round"
62          />
63          <path
64            d="M8 2L14 8L8 14"
65            stroke="black"
66            strokeWidth="2"
67            strokeLinecap="round"
68            strokeLinejoin="round"
69          />
70        </svg>
71      </Button>
72 
73      <div className="flex flex-col gap-2">
74        {topIcons.map((item) => (
75// … truncated