remove chakra menu

Southclaws · Dec 26, 2023 · e2a317a · e2a317a · vercel · Dec 26, 2023
1 parent f30bdad
commit e2a317a
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 45 deletions.
diff --git a/web/src/components/thread/PostMenu/PostMenu.tsx b/web/src/components/thread/PostMenu/PostMenu.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Portal } from "@ark-ui/react";
 import { LinkIcon, PencilIcon, TrashIcon } from "@heroicons/react/24/outline";
 import { ShareIcon } from "@heroicons/react/24/solid";
 import format from "date-fns/format";
@@ -8,12 +9,16 @@ import { PostProps } from "src/api/openapi/schemas";
 import { MoreAction } from "src/components/site/Action/More";
 import {
   Menu,
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
+  MenuContent,
   MenuItem,
-  MenuList,
-} from "src/theme/components";
+  MenuItemGroup,
+  MenuItemGroupLabel,
+  MenuPositioner,
+  MenuSeparator,
+  MenuTrigger,
+} from "src/theme/components/Menu";
+
+import { HStack, styled } from "@/styled-system/jsx";
 
 import { usePostMenu } from "./usePostMenu";
 
@@ -29,42 +34,65 @@ export function PostMenu(props: PostProps) {
   } = usePostMenu(props);
 
   return (
-    <Menu>
-      <MenuButton>
+    <Menu size="sm">
+      <MenuTrigger>
         <MoreAction />
-      </MenuButton>
-      <MenuList>
-        <MenuGroup title={`Post by ${props.author.name}`}>
-          <MenuItem isDisabled>
-            {format(new Date(props.createdAt), "yyyy-mm-dd")}
-          </MenuItem>
-        </MenuGroup>
-        <MenuDivider />
+      </MenuTrigger>
+
+      <Portal>
+        <MenuPositioner>
+          <MenuContent lazyMount minW="36">
+            <MenuItemGroup id="group">
+              <MenuItemGroupLabel
+                htmlFor="user"
+                display="flex"
+                flexDir="column"
+                userSelect="none"
+              >
+                <styled.span>{`Post by ${props.author.name}`}</styled.span>
+
+                <styled.time fontWeight="normal">
+                  {format(new Date(props.createdAt), "yyyy-mm-dd")}
+                </styled.time>
+              </MenuItemGroupLabel>
+
+              <MenuSeparator />
 
-        <MenuItem icon={<LinkIcon width="1.4em" />} onClick={onCopyLink}>
-          Copy link
-        </MenuItem>
+              <MenuItem id="copy-link" onClick={onCopyLink}>
+                <HStack gap="1">
+                  <LinkIcon width="1.4em" /> Copy link
+                </HStack>
+              </MenuItem>
 
-        {shareEnabled && (
-          <MenuItem icon={<ShareIcon width="1.4em" />} onClick={onShare}>
-            Share
-          </MenuItem>
-        )}
+              {shareEnabled && (
+                <MenuItem id="share" onClick={onShare}>
+                  <HStack gap="1">
+                    <ShareIcon width="1.4em" /> Share
+                  </HStack>
+                </MenuItem>
+              )}
 
-        {/* <MenuItem>Reply</MenuItem> */}
+              {/* <MenuItem>Reply</MenuItem> */}
 
-        {editEnabled && (
-          <MenuItem icon={<PencilIcon width="1.4em" />} onClick={onEdit}>
-            Edit
-          </MenuItem>
-        )}
+              {editEnabled && (
+                <MenuItem id="edit" onClick={onEdit}>
+                  <HStack gap="1">
+                    <PencilIcon width="1.4em" /> Edit
+                  </HStack>
+                </MenuItem>
+              )}
 
-        {deleteEnabled && (
-          <MenuItem icon={<TrashIcon width="1.4em" />} onClick={onDelete}>
-            Delete
-          </MenuItem>
-        )}
-      </MenuList>
+              {deleteEnabled && (
+                <MenuItem id="delete" onClick={onDelete}>
+                  <HStack gap="1">
+                    <TrashIcon width="1.4em" /> Delete
+                  </HStack>
+                </MenuItem>
+              )}
+            </MenuItemGroup>
+          </MenuContent>
+        </MenuPositioner>
+      </Portal>
     </Menu>
   );
 }
diff --git a/web/src/theme/components/index.ts b/web/src/theme/components/index.ts
@@ -1,10 +1,4 @@
 import {
-  Menu,
-  MenuButton,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-  MenuList,
   Popover,
   PopoverArrow,
   PopoverBody,
@@ -14,10 +8,6 @@ import {
 
 // NOTE: These are being replaced gradually, so these are being re-exported.
 
-// Menu
-
-export { Menu, MenuButton, MenuDivider, MenuGroup, MenuItem, MenuList };
-
 // Popover
 
 export { Popover, PopoverArrow, PopoverBody, PopoverContent, PopoverTrigger };