feat: add dropdown component

inertia/components/common/dropdown/dropdown.tsx

@@ -0,0 +1,56 @@
+import KEYS from '#constants/keys';
+import styled from '@emotion/styled';
+import { ReactNode, useRef } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
+import DropdownContainer from '~/components/common/dropdown/dropdown_container';
+import DropdownLabel from '~/components/common/dropdown/dropdown_label';
+import useClickOutside from '~/hooks/use_click_outside';
+import useGlobalHotkeys from '~/hooks/use_global_hotkeys';
+import useToggle from '~/hooks/use_modal';
+
+const DropdownStyle = styled.div<{ opened: boolean }>(({ opened, theme }) => ({
+  cursor: 'pointer',
+  userSelect: 'none',
+  position: 'relative',
+  minWidth: 'fit-content',
+  width: 'fit-content',
+  maxWidth: '250px',
+  backgroundColor: opened ? theme.colors.secondary : theme.colors.background,
+  padding: '4px',
+  borderRadius: theme.border.radius,
+
+  '&:hover': {
+    backgroundColor: theme.colors.secondary,
+  },
+
+  '& svg': {
+    height: '24px',
+    width: '24px',
+  },
+}));
+
+export default function Dropdown({
+  children,
+  label,
+}: {
+  children: ReactNode;
+  label: ReactNode | string;
+}) {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const { isShowing, toggle, close } = useToggle();
+  const { globalHotkeysEnabled } = useGlobalHotkeys();
+
+  useClickOutside(dropdownRef, close);
+
+  useHotkeys(KEYS.ESCAPE_KEY, close, {
+    enabled: globalHotkeysEnabled,
+    enableOnFormTags: ['INPUT'],
+  });
+
+  return (
+    <DropdownStyle opened={isShowing} onClick={toggle} ref={dropdownRef}>
+      <DropdownLabel>{label}</DropdownLabel>
+      <DropdownContainer show={isShowing}>{children}</DropdownContainer>
+    </DropdownStyle>
+  );
+}