mirror of
https://github.com/QuivrHQ/quivr.git
synced 2024-12-17 11:21:35 +03:00
253e866a86
# Description Hope ya'll don't mind, I updated the User Profile's UI to be a bit more readable. Kept the design neutral to not impose styles. I also kept the original toggle buttons for Theme and Language in case we still want to use those in other places in the app, where a select menu isn't necessary. ## Checklist before requesting a review Please delete options that are not relevant. - [ ] My code follows the style guidelines of this project - [ ] I have performed a self-review of my code - [ ] I have commented hard-to-understand areas - [ ] I have ideally added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged ## Screenshots (if appropriate): https://github.com/StanGirard/quivr/assets/64866427/d0320852-ece1-4002-a180-0005df132e71 https://github.com/StanGirard/quivr/assets/64866427/be3c67ec-8d42-44f9-8131-35a70aec20ef --------- Co-authored-by: Zineb El Bachiri <100568984+gozineb@users.noreply.github.com> Co-authored-by: Stan Girard <girard.stanislas@gmail.com>
60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
import { FaLanguage } from "react-icons/fa";
|
|
import { MdCheck } from "react-icons/md";
|
|
|
|
import Popover from "@/lib/components/ui/Popover";
|
|
|
|
import { useLanguageHook } from "./hooks/useLanguageHook";
|
|
|
|
export const LanguageDropDown = (): JSX.Element => {
|
|
const { allLanguages, currentLanguage, change } = useLanguageHook();
|
|
|
|
return (
|
|
<>
|
|
{/* Add the brain icon and dropdown */}
|
|
<div className="focus:outline-none text-3xl">
|
|
<Popover
|
|
Trigger={
|
|
<button
|
|
type="button"
|
|
className="flex items-center focus:outline-none"
|
|
>
|
|
<FaLanguage className="w-6 h-6" />
|
|
</button>
|
|
}
|
|
CloseTrigger={false}
|
|
>
|
|
<div>
|
|
<div className="overflow-auto scrollbar flex flex-col h-48 mt-5">
|
|
{Object.keys(allLanguages).map((lang) => {
|
|
return (
|
|
<div key={lang} className="relative flex group items-center">
|
|
<button
|
|
type="button"
|
|
className={`flex flex-1 items-center gap-2 w-full text-left px-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-300 group-hover:bg-gray-100 dark:group-hover:bg-gray-700 group-focus:bg-gray-100 dark:group-focus:bg-gray-700 group-focus:outline-none transition-colors`}
|
|
onClick={() => {
|
|
change(lang);
|
|
}}
|
|
>
|
|
<span>
|
|
<MdCheck
|
|
style={{
|
|
opacity: currentLanguage === lang ? 1 : 0,
|
|
}}
|
|
className="text-xl transition-opacity"
|
|
width={32}
|
|
height={32}
|
|
/>
|
|
</span>
|
|
<span className="flex-1">{allLanguages[lang].label}</span>
|
|
</button>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</Popover>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|