All files / src/components/channels PinnedGroupsRow.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { X } from "lucide-react";
import { ScrollArea } from "@/components/ui/scroll-area";
import type { PinnedGroup, Category } from "@/lib/types";
 
interface PinnedGroupsRowProps {
	pinnedGroups: PinnedGroup[];
	categories: Category[];
	selectedGroup: string | null;
	onSelectGroup: (groupName: string) => void;
	onUnpin: (groupName: string) => void;
}
 
export const PinnedGroupsRow = ({
	pinnedGroups,
	categories,
	selectedGroup,
	onSelectGroup,
	onUnpin,
}: PinnedGroupsRowProps) => {
	if (pinnedGroups.length === 0) return null;
 
	const getChannelCount = (groupName: string) =>
		categories.find((c) => c.name === groupName)?.channelCount ?? 0;
 
	return (
		<div className="px-4 py-2">
			<div className="flex items-center gap-1.5 mb-2">
				<span className="text-sm font-semibold text-muted-foreground">Pinned Groups</span>
			</div>
			<ScrollArea className="w-full">
				<div className="flex gap-2 pb-1">
					{pinnedGroups.map((pin) => (
						<div
							key={pin.groupName}
							className="flex items-center shrink-0 group"
						>
							<button
								onClick={() => onSelectGroup(pin.groupName)}
								className={`flex items-center gap-2 px-3 py-1.5 rounded-l-lg text-xs border transition-colors ${
									selectedGroup === pin.groupName
										? "bg-primary text-primary-foreground border-primary"
										: "bg-secondary text-secondary-foreground border-border hover:bg-accent"
								}`}
							>
								<span>{pin.groupName}</span>
								<span className="opacity-60 text-[10px]">
									{getChannelCount(pin.groupName)}
								</span>
							</button>
							<button
								onClick={() => onUnpin(pin.groupName)}
								className={`px-1.5 py-1.5 rounded-r-lg border border-l-0 text-xs opacity-0 group-hover:opacity-100 hover:text-destructive transition-all ${
									selectedGroup === pin.groupName
										? "border-primary bg-primary text-primary-foreground"
										: "border-border bg-secondary hover:bg-accent"
								}`}
								aria-label={`Unpin ${pin.groupName}`}
							>
								<X className="h-3 w-3" />
							</button>
						</div>
					))}
				</div>
			</ScrollArea>
		</div>
	);
};