Component/language drop down

components/Common/LanguageDropDown/index.module.css

@@ -0,0 +1,39 @@
+.iconWrapper {
+  @apply h-9
+    w-9
+    rounded-md 
+    bg-neutral-100 
+    p-2 
+    text-neutral-700
+    dark:bg-neutral-900
+    dark:text-neutral-300;
+}
+
+.dropDownContent {
+  @apply max-h-80
+    w-48
+    overflow-y-scroll
+    rounded
+    border 
+    border-neutral-200 
+    py-[1px]
+    shadow-lg
+    dark:border-neutral-900;
+}
+
+.dropDownItem {
+  @apply cursor-default 
+    px-2.5
+    py-1.5 
+    text-sm 
+    font-medium
+    text-neutral-800 
+    outline-none 
+    data-[highlighted]:bg-green-600
+    data-[highlighted]:text-white
+    dark:text-white;
+}
+
+.currentDropDown {
+  @apply bg-green-600 text-white;
+}

components/Common/LanguageDropDown/index.stories.tsx

@@ -0,0 +1,10 @@
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+import LanguageDropDown from './index';
+
+type Story = StoryObj<typeof LanguageDropDown>;
+type Meta = MetaObj<typeof LanguageDropDown>;
+
+export const Default: Story = {};
+
+export default { component: LanguageDropDown } as Meta;

components/Common/LanguageDropDown/index.tsx

@@ -0,0 +1,56 @@
+import { LanguageIcon } from '@heroicons/react/24/outline';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import classNames from 'classnames';
+import type { FC } from 'react';
+import { useIntl } from 'react-intl';
+
+import { useLocale } from '@/hooks/useLocale';
+
+import styles from './index.module.css';
+
+export type LanguageDropDownProps = {
+  onClick?: () => void;
+};
+
+const LanguageDropdown: FC<LanguageDropDownProps> = ({
+  onClick = () => {},
+}) => {
+  const { availableLocales, currentLocale } = useLocale();
+  const intl = useIntl();
+
+  const ariaLabel = intl.formatMessage({
+    id: 'components.common.languageDropdown.label',
+  });
+
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button className={styles.iconWrapper} aria-label={ariaLabel}>
+          <LanguageIcon height="20" />
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="start"
+          className={styles.dropDownContent}
+          sideOffset={5}
+        >
+          {availableLocales.map(({ name, code }) => (
+            <DropdownMenu.Item
+              key={code}
+              onClick={onClick}
+              className={classNames(styles.dropDownItem, {
+                [styles.currentDropDown]: code === currentLocale.code,
+              })}
+            >
+              {name}
+            </DropdownMenu.Item>
+          ))}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};
+
+export default LanguageDropdown;

i18n/locales/en.json

@@ -54,5 +54,6 @@
   "components.common.pagination.next": "Next",
   "components.common.pagination.nextAriaLabel": "Next page",
   "components.common.pagination.defaultLabel": "Pagination",
-  "components.common.pagination.pageLabel": "Go to page {pageNumber}"
+  "components.common.pagination.pageLabel": "Go to page {pageNumber}",
+  "components.common.languageDropdown.label": "Choose Language"
 }

package.json

@@ -44,6 +44,7 @@
     "@mdx-js/react": "^2.3.0",
     "@nodevu/core": "~0.1.0",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tabs": "^1.0.4",