use dropdown for lang

Author: avivkeller

apps/site/components/withNavBar.tsx

@@ -70,7 +70,7 @@ const WithNavBar: FC = () => {
           onChange={changeLanguage}
           availableLanguages={availableLocales}
           currentLanguage={locale}
-          ariaLabel={t('components.common.languageDropdown.label')}
+          aria-label={t('components.common.languageDropdown.label')}
         />
 
         <Link

packages/ui-components/Common/Dropdown/index.stories.tsx

@@ -8,7 +8,6 @@ type Meta = MetaObj<typeof Dropdown>;
 // Basic example with default anchor links
 export const Default: Story = {
   args: {
-    label: 'History',
     values: [
       { href: '#item1', children: 'Item 1' },
       { href: '#item2', children: 'Item 2' },

packages/ui-components/Common/Dropdown/index.tsx

@@ -6,7 +6,6 @@ import type { LinkLike } from '#ui/types.js';
 import styles from './index.module.css';
 
 type DropdownProps = ComponentProps<'div'> & {
-  label: string;
   values: Array<HTMLProps<HTMLAnchorElement | HTMLDivElement>>;
   as?: LinkLike;
 };
@@ -35,20 +34,20 @@ const Dropdown: FC<PropsWithChildren<DropdownProps>> = ({
               return (
                 <As
                   key={index}
-                  className={styles.dropdownItem}
                   role="menuitem"
                   tabIndex={0}
                   {...(value as ComponentProps<LinkLike>)}
+                  className={classNames(styles.dropdownItem, value.className)}
                 />
               );
             } else {
               return (
                 <div
                   key={index}
-                  className={styles.dropdownItem}
                   role="menuitem"
                   tabIndex={0}
                   {...(value as HTMLProps<HTMLDivElement>)}
+                  className={classNames(styles.dropdownItem, value.className)}
                 />
               );
             }

packages/ui-components/Common/LanguageDropDown/index.module.css

@@ -1,53 +1,12 @@
 @reference "../../styles/index.css";
 
 .languageDropdown {
-  @apply h-9
-    w-9
-    rounded-md
-    p-2
-    text-neutral-700
-    motion-safe:transition-colors
-    dark:text-neutral-300;
-
-  &:hover {
-    @apply bg-neutral-100
-      dark:bg-neutral-900;
+  summary {
+    @apply border-0;
   }
-}
 
-.dropDownContent {
-  @apply max-h-80
-    w-48
-    overflow-hidden
-    rounded-sm
-    border
-    border-neutral-200
-    bg-white
-    shadow-lg
-    dark:border-neutral-900
-    dark:bg-neutral-950;
-
-  > div {
-    @apply max-h-80
-      w-48
-      overflow-y-auto;
+  .selected {
+    @apply bg-green-600
+      text-white;
   }
 }
-
-.dropDownItem {
-  @apply outline-hidden
-    cursor-pointer
-    px-2.5
-    py-1.5
-    text-sm
-    font-medium
-    text-neutral-800
-    data-[highlighted]:bg-green-600
-    data-[highlighted]:text-white
-    dark:text-white;
-}
-
-.currentDropDown {
-  @apply bg-green-600
-    text-white;
-}

packages/ui-components/Common/LanguageDropDown/index.tsx

@@ -1,8 +1,8 @@
 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 Dropdown from '#ui/Common/Dropdown';
 import type { SimpleLocaleConfig } from '#ui/types';
 
 import styles from './index.module.css';
@@ -11,45 +11,30 @@ type LanguageDropDownProps = {
   onChange?: (newLocale: SimpleLocaleConfig) => void;
   currentLanguage: string;
   availableLanguages: Array<SimpleLocaleConfig>;
-  ariaLabel: string;
 };
 
 const LanguageDropdown: FC<LanguageDropDownProps> = ({
   onChange = () => {},
   currentLanguage,
   availableLanguages,
-  ariaLabel,
+  ...props
 }) => {
   return (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button className={styles.languageDropdown} aria-label={ariaLabel}>
-          <LanguageIcon height="20" />
-        </button>
-      </DropdownMenu.Trigger>
-
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          align="start"
-          className={styles.dropDownContent}
-          sideOffset={5}
-        >
-          <div>
-            {availableLanguages.map(({ name, code, localName }) => (
-              <DropdownMenu.Item
-                key={code}
-                onClick={() => onChange({ name, code, localName })}
-                className={classNames(styles.dropDownItem, {
-                  [styles.currentDropDown]: code === currentLanguage,
-                })}
-              >
-                {localName}
-              </DropdownMenu.Item>
-            ))}
-          </div>
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
+    <Dropdown
+      values={availableLanguages.map(({ name, code, localName }) => ({
+        onClick: () => onChange({ name, code, localName }),
+        children: localName,
+        key: code,
+        className: classNames({
+          'cursor-pointer': true,
+          [styles.selected]: currentLanguage === code,
+        }),
+      }))}
+      className={styles.languageDropdown}
+      {...props}
+    >
+      <LanguageIcon height="20" />
+    </Dropdown>
   );
 };