Add ContextMenu and ContextMenuItem

components/ContextMenu/index.scss

@@ -0,0 +1,6 @@
+.ContextMenu {
+  background: var(--menu-bg);
+  border-radius: $input-corner;
+  padding: $unit 0;
+  margin-top: $unit-fourth;
+}

components/ContextMenu/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import classNames from 'classnames'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+
+import './index.scss'
+
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {
+  align?: 'start' | 'center' | 'end'
+}
+
+export const ContextMenuContent = React.forwardRef<HTMLDivElement, Props>(
+  function ContextMenu({ children, ...props }, forwardedRef) {
+    const classes = classNames(
+      {
+        ContextMenu: true,
+      },
+      props.className
+    )
+
+    return (
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content className={classes} {...props} ref={forwardedRef}>
+          {children}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    )
+  }
+)
+
+export const ContextMenu = DropdownMenu.Root
+export const ContextMenuGroup = DropdownMenu.Group
+export const ContextMenuTrigger = DropdownMenu.Trigger

components/ContextMenuItem/index.scss

@@ -0,0 +1,11 @@
+.ContextItem {
+  color: var(--menu-text);
+  font-size: $font-regular;
+  padding: ($unit * 1.5) $unit-2x;
+
+  &:hover {
+    background: var(--menu-bg-item-hover);
+    color: var(--text-primary);
+    cursor: pointer;
+  }
+}

components/ContextMenuItem/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import classNames from 'classnames'
+import { DropdownMenuItem } from '@radix-ui/react-dropdown-menu'
+
+import './index.scss'
+
+interface Props
+  extends React.DetailedHTMLProps<
+    React.DialogHTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
+  > {}
+
+const ContextMenuItem = React.forwardRef<HTMLDivElement, Props>(
+  function ContextMenu({ children, ...props }, forwardedRef) {
+    const classes = classNames(
+      {
+        ContextItem: true,
+      },
+      props.className
+    )
+
+    return <DropdownMenuItem className={classes}>{children}</DropdownMenuItem>
+  }
+)
+
+export default ContextMenuItem