t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { Folder2, MusicNoteBeamed } from "@styled-icons/bootstrap";
2import { EllipsisHorizontal } from "@styled-icons/ionicons-sharp";
3import { NestedMenus, StatefulMenu } from "baseui/menu";
4import { StatefulPopover } from "baseui/popover";
5
6export type ContextMenuProps = {
7 file: {
8 id: string;
9 name: string;
10 type: string;
11 };
12};
13
14function ContextMenu(props: ContextMenuProps) {
15 const { file } = props;
16 return (
17 <>
18 <StatefulPopover
19 autoFocus={false}
20 content={({ close }) => (
21 <div className="border-[var(--color-border)] w-[240px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
22 <div
23 className="h-[54px] flex flex-row items-center pl-[5px] pr-[5px]"
24 style={{
25 borderBottom: "1px solid var(--color-border)",
26 }}
27 >
28 <div className="h-[43px] flex items-center justify-center ml-[10px] mr-[10px] text-[var(--color-text)]">
29 {file.type == "folder" && (
30 <div>
31 <Folder2 size={20} />
32 </div>
33 )}
34 {file.type !== "folder" && (
35 <div>
36 <MusicNoteBeamed size={20} />
37 </div>
38 )}
39 </div>
40 <div className="text-[var(--color-text)] whitespace-nowrap text-ellipsis overflow-hidden">
41 {file.name}
42 </div>
43 </div>
44 <NestedMenus>
45 <StatefulMenu
46 items={[
47 {
48 id: "0",
49 label: "Play",
50 },
51 {
52 id: "1",
53 label: "Play Next",
54 },
55 {
56 id: "2",
57 label: "Add to Playlist",
58 },
59 {
60 id: "3",
61 label: "Play Last",
62 },
63 {
64 id: "4",
65 label: "Add Shuffled",
66 },
67 ]}
68 onItemSelect={({ item }) => {
69 console.log(`Selected item: ${item.label}`);
70 close();
71 }}
72 overrides={{
73 List: {
74 style: {
75 boxShadow: "none",
76 outline: "none !important",
77 backgroundColor: "var(--color-background)",
78 },
79 },
80 ListItem: {
81 style: {
82 backgroundColor: "var(--color-background)",
83 color: "var(--color-text)",
84 ":hover": {
85 backgroundColor: "var(--color-menu-hover)",
86 },
87 },
88 },
89 Option: {
90 props: {
91 getChildMenu: (item: { label: string }) => {
92 if (item.label === "Add to Playlist") {
93 return (
94 <div className="border-[var(--color-border)] w-[205px] border-[1px] bg-[var(--color-background)] rounded-[6px]">
95 <StatefulMenu
96 items={{
97 __ungrouped: [
98 {
99 label: "Create new playlist",
100 },
101 ],
102 }}
103 overrides={{
104 List: {
105 style: {
106 boxShadow: "none",
107 outline: "none !important",
108 backgroundColor:
109 "var(--color-background)",
110 },
111 },
112 ListItem: {
113 style: {
114 backgroundColor:
115 "var(--color-background)",
116 color: "var(--color-text)",
117 ":hover": {
118 backgroundColor:
119 "var(--color-menu-hover)",
120 },
121 },
122 },
123 }}
124 />
125 </div>
126 );
127 }
128 return null;
129 },
130 },
131 },
132 }}
133 />
134 </NestedMenus>
135 </div>
136 )}
137 overrides={{
138 Inner: {
139 style: {
140 backgroundColor: "var(--color-background)",
141 },
142 },
143 }}
144 >
145 <button className="text-[var(--color-text-muted)] cursor-pointer bg-transparent border-none hover:bg-transparent">
146 <EllipsisHorizontal size={24} />
147 </button>
148 </StatefulPopover>
149 </>
150 );
151}
152
153export default ContextMenu;