a tool for shared writing and social publishing
styled the share button a bit, added a dropdown so you can choose between collab link and publish link
+93
-29
+16
-13
components/Cards.tsx
+16
-13
components/Cards.tsx
···
12
12
import { MoreOptionsTiny, DeleteSmall, CloseTiny } from "./Icons";
13
13
import { useToaster } from "./Toast";
14
14
import { ShareOptions } from "./ShareOptions";
15
+
import { MenuItem, Menu } from "./Layout";
15
16
16
17
export function Cards(props: { rootCard: string }) {
17
18
let cards = useUIState((s) => s.openCards);
···
24
25
style={{ width: `calc(50vw - ${cardWidth}px/2)` }}
25
26
>
26
27
<Media mobile={false}>
27
-
<div className="flex flex-col gap-2 mr-4 mt-2">
28
-
<PageOptions entityID={props.rootCard} />
28
+
<div className="flex flex-col justify-center gap-2 mr-4 mt-2">
29
29
<ShareOptions rootEntity={props.rootCard} />
30
+
<PageOptions entityID={props.rootCard} />
30
31
</div>
31
32
</Media>
32
33
</div>
···
130
131
<Popover.Portal>
131
132
<Popover.Content
132
133
align="end"
133
-
className="cardOptionsMenu bg-bg-card flex flex-col py-1 gap-0.5 border border-border rounded-md shadow-md"
134
+
sideOffset={6}
135
+
className="cardOptionsMenu"
134
136
>
135
-
<CardMenuItem
136
-
onClick={() => {
137
-
// TODO: Wire up delete card
138
-
toaster(DeleteCardToast);
139
-
}}
140
-
>
141
-
Delete Page <DeleteSmall />
142
-
</CardMenuItem>
143
-
<Popover.Arrow />
137
+
<Menu>
138
+
<MenuItem
139
+
onClick={(e) => {
140
+
// TODO: Wire up delete card
141
+
toaster(DeleteCardToast);
142
+
}}
143
+
>
144
+
Delete Page <DeleteSmall />
145
+
</MenuItem>
146
+
</Menu>
144
147
</Popover.Content>
145
148
</Popover.Portal>
146
149
</Popover.Root>
···
154
157
}) => {
155
158
return (
156
159
<button
157
-
className="cardOptionsMenuItem z-10 text-left text-secondary py-1 px-2 flex gap-2 font-bold hover:bg-accent hover:text-accentText "
160
+
className="cardOptionsMenuItem z-10 text-left text-secondary py-1 px-2 flex gap-2 hover:bg-accent hover:text-accentText "
158
161
onClick={() => {
159
162
props.onClick();
160
163
}}
+22
components/Layout.tsx
+22
components/Layout.tsx
···
3
3
<div className={`min-h-full border-r border-border ${props.classname}`} />
4
4
);
5
5
};
6
+
7
+
export const Menu = (props: { children?: React.ReactNode }) => {
8
+
return (
9
+
<div className="dropdownMenu bg-bg-card flex flex-col py-1 gap-0.5 border border-border rounded-md shadow-md">
10
+
{props.children}
11
+
</div>
12
+
);
13
+
};
14
+
15
+
export const MenuItem = (props: {
16
+
children?: React.ReactNode;
17
+
onClick: (e: React.MouseEvent) => void;
18
+
}) => {
19
+
return (
20
+
<button
21
+
onClick={(e) => props.onClick(e)}
22
+
className="MenuItem z-10 text-left text-secondary py-1 px-3 flex gap-2 hover:bg-border-light hover:text-secondary "
23
+
>
24
+
{props.children}
25
+
</button>
26
+
);
27
+
};