src/components/nav-actions.tsx 3.1 K raw
1
import * as React from "react"
2
import {
3
  ArrowDown,
4
  ArrowUp,
5
  Bell,
6
  Copy,
7
  CornerUpLeft,
8
  CornerUpRight,
9
  FileText,
10
  GalleryVerticalEnd,
11
  LineChart,
12
  Link,
13
  MoreHorizontal,
14
  Settings2,
15
  Star,
16
  Trash,
17
  Trash2,
18
} from "lucide-react"
19
20
import { Button } from "@/components/ui/button"
21
import {
22
  Popover,
23
  PopoverContent,
24
  PopoverTrigger,
25
} from "@/components/ui/popover"
26
import {
27
  Sidebar,
28
  SidebarContent,
29
  SidebarGroup,
30
  SidebarGroupContent,
31
  SidebarMenu,
32
  SidebarMenuButton,
33
  SidebarMenuItem,
34
} from "@/components/ui/sidebar"
35
36
const data = [
37
  [
38
    {
39
      label: "Customize Page",
40
      icon: Settings2,
41
    },
42
    {
43
      label: "Turn into wiki",
44
      icon: FileText,
45
    },
46
  ],
47
  [
48
    {
49
      label: "Copy Link",
50
      icon: Link,
51
    },
52
    {
53
      label: "Duplicate",
54
      icon: Copy,
55
    },
56
    {
57
      label: "Move to",
58
      icon: CornerUpRight,
59
    },
60
    {
61
      label: "Move to Trash",
62
      icon: Trash2,
63
    },
64
  ],
65
  [
66
    {
67
      label: "Undo",
68
      icon: CornerUpLeft,
69
    },
70
    {
71
      label: "View analytics",
72
      icon: LineChart,
73
    },
74
    {
75
      label: "Version History",
76
      icon: GalleryVerticalEnd,
77
    },
78
    {
79
      label: "Show delete pages",
80
      icon: Trash,
81
    },
82
    {
83
      label: "Notifications",
84
      icon: Bell,
85
    },
86
  ],
87
  [
88
    {
89
      label: "Import",
90
      icon: ArrowUp,
91
    },
92
    {
93
      label: "Export",
94
      icon: ArrowDown,
95
    },
96
  ],
97
]
98
99
export function NavActions() {
100
  const [isOpen, setIsOpen] = React.useState(false)
101
102
  React.useEffect(() => {
103
    setIsOpen(true)
104
  }, [])
105
106
  return (
107
    <div className="flex items-center gap-2 text-sm">
108
      <div className="text-muted-foreground hidden font-medium md:inline-block">
109
        Edit Oct 08
110
      </div>
111
      <Button variant="ghost" size="icon" className="h-7 w-7">
112
        <Star />
113
      </Button>
114
      <Popover open={isOpen} onOpenChange={setIsOpen}>
115
        <PopoverTrigger asChild>
116
          <Button
117
            variant="ghost"
118
            size="icon"
119
            className="data-[state=open]:bg-accent h-7 w-7"
120
          >
121
            <MoreHorizontal />
122
          </Button>
123
        </PopoverTrigger>
124
        <PopoverContent
125
          className="w-56 overflow-hidden rounded-lg p-0"
126
          align="end"
127
        >
128
          <Sidebar collapsible="none" className="bg-transparent">
129
            <SidebarContent>
130
              {data.map((group, index) => (
131
                <SidebarGroup key={index} className="border-b last:border-none">
132
                  <SidebarGroupContent className="gap-0">
133
                    <SidebarMenu>
134
                      {group.map((item, index) => (
135
                        <SidebarMenuItem key={index}>
136
                          <SidebarMenuButton>
137
                            <item.icon /> <span>{item.label}</span>
138
                          </SidebarMenuButton>
139
                        </SidebarMenuItem>
140
                      ))}
141
                    </SidebarMenu>
142
                  </SidebarGroupContent>
143
                </SidebarGroup>
144
              ))}
145
            </SidebarContent>
146
          </Sidebar>
147
        </PopoverContent>
148
      </Popover>
149
    </div>
150
  )
151
}