Buttongroups5

1"use client";
2 
3import { useState } from "react";
4import { Button } from "@/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuTrigger,
10} from "@/ui/dropdown-menu";
11import { Badge } from "@/ui/badge";
12import { ChevronDown, Eye, GitBranch, Star } from "@mynaui/icons-react";
13import { Pin } from "@mynaui/icons-react";
14 
15export default function ButtonGroups5() {
16  const [watchCount, setWatchCount] = useState(1);
17  const [starCount, setStarCount] = useState(8);
18  const [isPinned, setIsPinned] = useState(false);
19  const [isWatching, setIsWatching] = useState(false);
20  const [isStarred, setIsStarred] = useState(false);
21 
22  const handlePin = () => {
23    setIsPinned(!isPinned);
24  };
25 
26  const handleWatch = () => {
27    if (!isWatching) {
28      setWatchCount(watchCount + 1);
29    } else {
30      setWatchCount(Math.max(0, watchCount - 1));
31    }
32    setIsWatching(!isWatching);
33  };
34 
35  const handleStar = () => {
36    if (!isStarred) {
37      setStarCount(starCount + 1);
38    } else {
39      setStarCount(Math.max(0, starCount - 1));
40    }
41    setIsStarred(!isStarred);
42  };
43 
44  return (
45    <div className="flex flex-wrap gap-2 p-4">
46      <Button
47        onClick={handlePin}
48        variant={isPinned ? "default" : "outline"}
49        className="flex items-center gap-2 h-9 px-4"
50      >
51        <Pin className="size-4 stroke-2" />
52        <span>Pin</span>
53      </Button>
54 
55      <div className="flex">
56        <Button
57          onClick={handleWatch}
58          variant={isWatching ? "default" : "outline"}
59          className="flex items-center gap-2 h-9 px-4 rounded-r-none border-r-0"
60        >
61          <Eye className="size-4 stroke-2" />
62          <span>Watch</span>
63          <Badge
64            variant={isWatching ? "secondary" : "outline"}
65            className="font-mono -me-1"
66          >
67            {watchCount}
68          </Badge>
69        </Button>
70        <DropdownMenu>
71          <DropdownMenuTrigger asChild>
72            <Button variant="outline" className="h-9 px-2 rounded-l-none">
73              <ChevronDown className="size-4 stroke-2" />
74            </Button>
75          </DropdownMenuTrigger>
76          <DropdownMenuContent align="end">
77            <DropdownMenuItem>Participating</DropdownMenuItem>
78            <DropdownMenuItem>All Activity</DropdownMenuItem>
79            <DropdownMenuItem>Ignore</DropdownMenuItem>
80            <DropdownMenuItem>Custom</DropdownMenuItem>
81          </DropdownMenuContent>
82        </DropdownMenu>
83      </div>
84 
85// … truncated