VIDSOL-208: Language selector

frontend/.env.example

@@ -17,4 +17,4 @@ VITE_TUNNEL_DOMAIN=''
 # Default language for i18next
 VITE_I18N_FALLBACK_LANGUAGE='en'
 # List all supported language, separated by | (example: VITE_I18N_SUPPORTED_LANGUAGES='en|es')
-VITE_I18N_SUPPORTED_LANGUAGES='en|es|es-MX'
+VITE_I18N_SUPPORTED_LANGUAGES='en|en-US|es|es-MX|it'

frontend/index.d.ts

@@ -0,0 +1,10 @@
+import type React from 'react';
+
+declare namespace JSX {
+  interface IntrinsicElements {
+    'vwc-icon': React.ComponentType<{
+        size: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | 6;
+        name: string;
+    }>;
+  }
+}

frontend/package.json

@@ -32,6 +32,7 @@
     "@vitejs/plugin-react": "^4.4.1",
     "@vonage/client-sdk-video": "^2.31.0",
     "@vonage/vcr-sdk": "^1.3.0",
+    "@vonage/vivid": "^5.2.0",
     "autolinker": "^4.0.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.12.0",

frontend/src/components/Banner/Banner.tsx

@@ -2,11 +2,12 @@ import { ReactElement } from 'react';
 import BannerDateTime from '../BannerDateTime';
 import BannerLinks from '../BannerLinks';
 import BannerLogo from '../BannerLogo';
+import BannerLanguage from '../BannerLanguage';
 
 /**
  * Banner Component
  *
- * This component returns a banner that includes a logo, current date/time, and some links.
+ * This component returns a banner that includes a logo, current date/time, language selector, and some links.
  * @returns {ReactElement} - the banner component.
  */
 const Banner = (): ReactElement => {
@@ -16,6 +17,7 @@ const Banner = (): ReactElement => {
 
       <div className="flex px-4">
         <BannerDateTime />
+        <BannerLanguage />
         <BannerLinks />
       </div>
     </div>

frontend/src/components/BannerLanguage/BannerLanguage.spec.tsx

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import BannerLanguage from './BannerLanguage';
+
+describe('BannerLanguage', () => {
+  it('renders the banner language component', () => {
+    render(
+      <MemoryRouter>
+        <BannerLanguage />
+      </MemoryRouter>
+    );
+
+    const bannerLanguage = screen.getByTestId('banner-language');
+    expect(bannerLanguage).toBeInTheDocument();
+  });
+});

frontend/src/components/BannerLanguage/BannerLanguage.tsx

@@ -0,0 +1,18 @@
+import { ReactElement } from 'react';
+import LanguageSelector from '../LanguageSelector';
+
+/**
+ * BannerLanguage Component
+ *
+ * This component provides a language selection feature for the banner.
+ * @returns {ReactElement} The BannerLanguage component.
+ */
+const BannerLanguage = (): ReactElement => {
+  return (
+    <div className="flex items-center" data-testid="banner-language">
+      <LanguageSelector />
+    </div>
+  );
+};
+
+export default BannerLanguage;

frontend/src/components/BannerLanguage/index.tsx

@@ -0,0 +1,3 @@
+import BannerLanguage from './BannerLanguage';
+
+export default BannerLanguage;