added language icon

asyncapi · Jan 8, 2025 · eec0f74 · eec0f74
1 parent 6879ec8
commit eec0f74
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 29 deletions.
diff --git a/components/icons/Icons.mdx b/components/icons/Icons.mdx
@@ -30,6 +30,7 @@ import IconGuide from './Guide';
 import IconHome from './Home';
 import IconHub from './Hub';
 import InfoIcon from './InfoIcon';
+import IconLanguage from './Language';
 import IconLightBulb from './LightBulb';
 import IconLinkedIn from './LinkedIn';
 import IconLoupe from './Loupe';
@@ -236,6 +237,10 @@ These are the icons used in the AsyncAPI website.
   <InfoIcon />
 </IconItem>
 
+<IconItem name="Language">
+  <IconLanguage />
+</IconItem>
+
 <IconItem name="Light Bulb">
   <IconLightBulb />
 </IconItem>

diff --git a/components/icons/Language.tsx b/components/icons/Language.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+/* eslint-disable max-len */
+/**
+ * @description Icons for asyncapi website
+ */
+export default function IconLanguage({ className = '' }) {
+  return (
+    <svg
+      xmlns='http://www.w3.org/2000/svg'
+      fill='none'
+      viewBox='0 0 24 24'
+      strokeWidth={1.5}
+      stroke='currentColor'
+      className={`size-5 ${className}`}
+    >
+      <path
+        strokeLinecap='round'
+        strokeLinejoin='round'
+        d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'
+      />
+    </svg>
+  );
+}
diff --git a/components/languageSelector/LanguageSelect.tsx b/components/languageSelector/LanguageSelect.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import type { SelectProps } from '../form/Select';
+import IconLanguage from '../icons/Language';
 
 /**
  * @description LanguageSelect component for selecting a language.
@@ -12,19 +13,25 @@ import type { SelectProps } from '../form/Select';
  */
 export default function LanguageSelect({ className = '', onChange = () => {}, options = [], selected }: SelectProps) {
   return (
-    <select
-      data-testid='Select-form'
-      onChange={(ev) => onChange(ev.target.value)}
-      className={twMerge(
-        `form-select h-full px-3 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`
-      )}
-      value={selected}
-    >
-      {options.map((option, index) => (
-        <option key={index} value={option.value} data-testid='Option-form'>
-          {option.text}
-        </option>
-      ))}
-    </select>
+    <div className='relative inline-block'>
+      <div className='relative flex items-center gap-2'>
+        {/* Display Icon Next to the Select Box */}
+        <IconLanguage className='pointer-events-none absolute left-3 text-gray-600' />
+        <select
+          data-testid='Select-form'
+          onChange={(ev) => onChange(ev.target.value)}
+          className={twMerge(
+            `form-select h-full px-10 pr-7 inline-flex justify-center rounded-md border border-gray-300 shadow-sm py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black ${className}`
+          )}
+          value={selected}
+        >
+          {options.map((option, index) => (
+            <option key={index} value={option.value} data-testid='Option-form'>
+              {option.text}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
   );
 }
diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx
@@ -2,6 +2,7 @@ import Link from 'next/link';
 import React, { useState } from 'react';
 
 import { SearchButton } from '../AlgoliaSearch';
+import IconLanguage from '../icons/Language';
 import NavItemDropdown from '../icons/NavItemDropdown';
 import SearchIcon from '../icons/SearchIcon';
 import AsyncAPILogo from '../logos/AsyncAPILogo';
@@ -140,21 +141,7 @@ export default function MobileNavMenu({
               <div>
                 <h4 className='mb-4 flex justify-between font-medium text-gray-800'>
                   <a className='flex cursor-pointer items-center gap-x-2'>
-                    Language{' '}
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      fill='none'
-                      viewBox='0 0 24 24'
-                      strokeWidth={1.5}
-                      stroke='currentColor'
-                      className='size-5'
-                    >
-                      <path
-                        strokeLinecap='round'
-                        strokeLinejoin='round'
-                        d='m10.5 21 5.25-11.25L21 21m-9-3h7.5M3 5.621a48.474 48.474 0 0 1 6-.371m0 0c1.12 0 2.233.038 3.334.114M9 5.25V3m3.334 2.364C11.176 10.658 7.69 15.08 3 17.502m9.334-12.138c.896.061 1.785.147 2.666.257m-4.589 8.495a18.023 18.023 0 0 1-3.827-5.802'
-                      />
-                    </svg>
+                    Language <IconLanguage />
                   </a>
                   <NavItemDropdown />
                 </h4>