Displayed flags next to the language in language selector

This commit is contained in:
AshAnand34 2025-07-21 21:41:19 -07:00
commit a0a798143c

View file

@ -16,7 +16,8 @@ import {
Stack, Stack,
Select, Select,
MenuItem, MenuItem,
FormControl FormControl,
Typography
} from '@mui/material'; } from '@mui/material';
import useMediaQuery from '@mui/material/useMediaQuery'; import useMediaQuery from '@mui/material/useMediaQuery';
import { useTheme } from '@mui/material/styles'; import { useTheme } from '@mui/material/styles';
@ -29,16 +30,16 @@ interface NavbarProps {
onChangeMode: () => void; onChangeMode: () => void;
} }
const languages = [ const languages = [
{ code: 'en', label: 'English' }, { code: 'en', label: 'English', flag: 'circle-flags:lang-en' },
{ code: 'de', label: 'Deutsch' }, { code: 'de', label: 'Deutsch', flag: 'circle-flags:lang-de' },
{ code: 'es', label: 'Español' }, { code: 'es', label: 'Español', flag: 'circle-flags:lang-es' },
{ code: 'fr', label: 'Français' }, { code: 'fr', label: 'Français', flag: 'circle-flags:lang-fr' },
{ code: 'pt', label: 'Português' }, { code: 'pt', label: 'Português', flag: 'circle-flags:lang-pt' },
{ code: 'ja', label: '日本語' }, { code: 'ja', label: '日本語', flag: 'circle-flags:lang-ja' },
{ code: 'hi', label: 'हिंदी' }, { code: 'hi', label: 'हिंदी', flag: 'circle-flags:lang-hi' },
{ code: 'nl', label: 'Nederlands' }, { code: 'nl', label: 'Nederlands', flag: 'circle-flags:lang-nl' },
{ code: 'ru', label: 'Русский' }, { code: 'ru', label: 'Русский', flag: 'circle-flags:lang-ru' },
{ code: 'zh', label: '中文' } { code: 'zh', label: '中文', flag: 'circle-flags:lang-zh' }
]; ];
const Navbar: React.FC<NavbarProps> = ({ const Navbar: React.FC<NavbarProps> = ({
@ -89,7 +90,10 @@ const Navbar: React.FC<NavbarProps> = ({
> >
{languages.map((lang) => ( {languages.map((lang) => (
<MenuItem key={lang.code} value={lang.code}> <MenuItem key={lang.code} value={lang.code}>
{lang.label} <Stack direction="row" alignItems="center" spacing={1}>
<Icon key={lang.code} icon={lang.flag} fontSize={30} />
<Typography>{lang.label}</Typography>
</Stack>
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
@ -112,12 +116,14 @@ const Navbar: React.FC<NavbarProps> = ({
} }
/>, />,
<Icon <Icon
key="discord"
onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')} onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')}
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
fontSize={30} fontSize={30}
icon={'ic:baseline-discord'} icon={'ic:baseline-discord'}
/>, />,
<iframe <iframe
key="github-star"
src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large" src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
frameBorder="0" frameBorder="0"
scrolling="0" scrolling="0"
@ -126,6 +132,7 @@ const Navbar: React.FC<NavbarProps> = ({
title="GitHub" title="GitHub"
></iframe>, ></iframe>,
<Button <Button
key="buy-me-a-coffee"
onClick={() => { onClick={() => {
window.open('https://buymeacoffee.com/iib0011', '_blank'); window.open('https://buymeacoffee.com/iib0011', '_blank');
}} }}