src/components/nav-favorites.tsx 2.3 K raw
1
import {
2
	ArrowUpRight,
3
	Link,
4
	MoreHorizontal,
5
	StarOff,
6
	Trash2,
7
} from "lucide-react";
8
9
import {
10
	DropdownMenu,
11
	DropdownMenuContent,
12
	DropdownMenuItem,
13
	DropdownMenuSeparator,
14
	DropdownMenuTrigger,
15
} from "@/components/ui/dropdown-menu";
16
import {
17
	SidebarGroup,
18
	SidebarGroupLabel,
19
	SidebarMenu,
20
	SidebarMenuAction,
21
	SidebarMenuButton,
22
	SidebarMenuItem,
23
	useSidebar,
24
} from "@/components/ui/sidebar";
25
26
export function NavFavorites({
27
	favorites,
28
}: {
29
	favorites: {
30
		name: string;
31
		url: string;
32
		emoji: string;
33
	}[];
34
}) {
35
	const { isMobile } = useSidebar();
36
37
	return (
38
		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
39
			<SidebarGroupLabel>Favorites</SidebarGroupLabel>
40
			<SidebarMenu>
41
				{favorites.map((item) => (
42
					<SidebarMenuItem key={item.name}>
43
						<SidebarMenuButton asChild>
44
							<a href={item.url} title={item.name}>
45
								<span>{item.emoji}</span>
46
								<span>{item.name}</span>
47
							</a>
48
						</SidebarMenuButton>
49
						<DropdownMenu>
50
							<DropdownMenuTrigger asChild>
51
								<SidebarMenuAction showOnHover>
52
									<MoreHorizontal />
53
									<span className="sr-only">More</span>
54
								</SidebarMenuAction>
55
							</DropdownMenuTrigger>
56
							<DropdownMenuContent
57
								className="w-56 rounded-lg"
58
								side={isMobile ? "bottom" : "right"}
59
								align={isMobile ? "end" : "start"}
60
							>
61
								<DropdownMenuItem>
62
									<StarOff className="text-muted-foreground" />
63
									<span>Remove from Favorites</span>
64
								</DropdownMenuItem>
65
								<DropdownMenuSeparator />
66
								<DropdownMenuItem>
67
									<Link className="text-muted-foreground" />
68
									<span>Copy Link</span>
69
								</DropdownMenuItem>
70
								<DropdownMenuItem>
71
									<ArrowUpRight className="text-muted-foreground" />
72
									<span>Open in New Tab</span>
73
								</DropdownMenuItem>
74
								<DropdownMenuSeparator />
75
								<DropdownMenuItem>
76
									<Trash2 className="text-muted-foreground" />
77
									<span>Delete</span>
78
								</DropdownMenuItem>
79
							</DropdownMenuContent>
80
						</DropdownMenu>
81
					</SidebarMenuItem>
82
				))}
83
				<SidebarMenuItem>
84
					<SidebarMenuButton className="text-sidebar-foreground/70">
85
						<MoreHorizontal />
86
						<span>More</span>
87
					</SidebarMenuButton>
88
				</SidebarMenuItem>
89
			</SidebarMenu>
90
		</SidebarGroup>
91
	);
92
}