feat(react-components): Add DropdownMenu component (#200)

Add `DropdownMenu` component

packages/react-components/package.json

@@ -47,6 +47,7 @@
   "dependencies": {
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
     "@radix-ui/react-switch": "^1.0.2",
     "joi": "^17.9.2"
   }

packages/react-components/src/components/DropdownMenu/index.tsx

@@ -0,0 +1,51 @@
+import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
+import styled from "styled-components";
+
+export const DropdownMenu = {
+  Root: RadixDropdownMenu.Root,
+
+  Trigger: styled(RadixDropdownMenu.Trigger)`
+    cursor: pointer;
+  `,
+
+  Content: styled(RadixDropdownMenu.Content)`
+    display: grid;
+    gap: 0.5rem;
+    min-width: 22rem;
+    background: ${({ theme }) => theme.color.backgroundLighter};
+    border-radius: ${({ theme }) => theme.borderRadius};
+    box-shadow: 0 5px 5px 0 ${({ theme }) => theme.color.black40};
+    padding: 1rem 0;
+  `,
+
+  Arrow: styled(RadixDropdownMenu.Arrow)`
+    fill: ${({ theme }) => theme.color.black40};
+  `,
+
+  Item: styled(RadixDropdownMenu.Item)`
+    border-radius: 3px;
+    display: flex;
+    gap: 1.5rem;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    margin: 0 0.5rem;
+    user-select: none;
+    outline: none;
+
+    &[data-disabled] {
+      pointer-events: none;
+      opacity: 0.8;
+    }
+
+    &:focus {
+      background: ${({ theme }) => theme.color.comment};
+      cursor: pointer;
+    }
+  `,
+
+  Divider: styled.div`
+    height: 1px;
+    background: ${({ theme }) => theme.color.selection};
+    margin: 0.5rem 0;
+  `,
+};

packages/react-components/src/index.ts

@@ -5,6 +5,7 @@ export { Button } from "./components/Button";
 export { Card } from "./components/Card";
 export { Checkbox } from "./components/Checkbox";
 export { Dialog } from "./components/Dialog";
+export { DropdownMenu } from "./components/DropdownMenu";
 export { FeedbackDialog } from "./components/FeedbackDialog";
 export { ForwardRef } from "./components/ForwardRef";
 export { Heading } from "./components/Heading";