Fix jwt-token

client/src/components/common/LanguageSelector.jsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Menu, Transition } from '@headlessui/react';
+import { Fragment } from 'react';
+import { GlobeAltIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
+
+const languages = [
+  { code: 'en', name: 'English', flag: '🇺🇸' },
+  { code: 'sv', name: 'Svenska', flag: '🇸🇪' }
+];
+
+export default function LanguageSelector({ className = '' }) {
+  const { i18n, t } = useTranslation();
+
+  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];
+
+  const changeLanguage = (languageCode) => {
+    i18n.changeLanguage(languageCode);
+  };
+
+  return (
+    <Menu as="div" className={`relative inline-block text-left ${className}`}>
+      <div>
+        <Menu.Button className="inline-flex items-center justify-center w-full px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          <GlobeAltIcon className="w-4 h-4 mr-2" />
+          <span className="mr-1">{currentLanguage.flag}</span>
+          <span>{currentLanguage.name}</span>
+          <ChevronDownIcon className="w-4 h-4 ml-2" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="py-1">
+            {languages.map((language) => (
+              <Menu.Item key={language.code}>
+                {({ active }) => (
+                  <button
+                    onClick={() => changeLanguage(language.code)}
+                    className={`${
+                      active ? 'bg-gray-100 text-gray-900' : 'text-gray-700'
+                    } ${
+                      language.code === i18n.language ? 'bg-indigo-50 text-indigo-600' : ''
+                    } group flex items-center px-4 py-2 text-sm w-full text-left`}
+                  >
+                    <span className="mr-3">{language.flag}</span>
+                    <span>{language.name}</span>
+                    {language.code === i18n.language && (
+                      <span className="ml-auto">
+                        <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      </span>
+                    )}
+                  </button>
+                )}
+              </Menu.Item>
+            ))}
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}