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