mirror of
https://github.com/meshtastic/web.git
synced 2026-05-24 06:05:06 -04:00
Fix language settings select & bump deps
This commit is contained in:
Sacha Weatherstone
22
package.json
22
package.json
@@ -11,51 +11,51 @@
|
||||
"lint": "eslint 'src/**/*.{ts,tsx}'"
|
||||
},
|
||||
"dependencies": {
|
||||
"@headlessui/react": "^1.4.0",
|
||||
"@headlessui/react": "^1.4.1",
|
||||
"@heroicons/react": "^1.0.4",
|
||||
"@meshtastic/meshtasticjs": "^0.6.17",
|
||||
"@reduxjs/toolkit": "^1.6.1",
|
||||
"apexcharts": "^3.28.1",
|
||||
"boring-avatars": "^1.5.8",
|
||||
"i18next": "^20.4.0",
|
||||
"i18next": "^20.6.0",
|
||||
"i18next-browser-languagedetector": "^6.1.2",
|
||||
"moment": "^2.29.1",
|
||||
"react": "^17.0.2",
|
||||
"react-apexcharts": "^1.3.9",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-flags-select": "^2.1.2",
|
||||
"react-hook-form": "^7.14.0",
|
||||
"react-hook-form": "^7.15.0",
|
||||
"react-i18next": "^11.11.4",
|
||||
"react-redux": "^7.2.4",
|
||||
"react-redux": "^7.2.5",
|
||||
"type-route": "^0.6.0",
|
||||
"use-breakpoint": "^2.0.1"
|
||||
"use-breakpoint": "^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@snowpack/plugin-dotenv": "^2.2.0",
|
||||
"@snowpack/plugin-postcss": "^1.4.3",
|
||||
"@snowpack/plugin-react-refresh": "^2.5.0",
|
||||
"@snowpack/plugin-typescript": "^1.2.1",
|
||||
"@types/react": "^17.0.19",
|
||||
"@types/react": "^17.0.20",
|
||||
"@types/react-dom": "^17.0.9",
|
||||
"@types/react-redux": "^7.1.18",
|
||||
"@types/snowpack-env": "^2.3.4",
|
||||
"@typescript-eslint/eslint-plugin": "^4.29.3",
|
||||
"@typescript-eslint/parser": "^4.29.3",
|
||||
"@typescript-eslint/eslint-plugin": "^4.31.0",
|
||||
"@typescript-eslint/parser": "^4.31.0",
|
||||
"@verypossible/eslint-config": "^1.6.1",
|
||||
"autoprefixer": "^10.3.3",
|
||||
"autoprefixer": "^10.3.4",
|
||||
"babel-plugin-module-resolver": "^4.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-import-resolver-babel-module": "^5.3.1",
|
||||
"eslint-import-resolver-typescript": "^2.4.0",
|
||||
"eslint-plugin-import": "^2.24.2",
|
||||
"eslint-plugin-react": "^7.24.0",
|
||||
"eslint-plugin-react": "^7.25.1",
|
||||
"eslint-plugin-react-hooks": "^4.2.0",
|
||||
"gzipper": "^5.0.0",
|
||||
"postcss": "^8.3.6",
|
||||
"prettier": "^2.3.2",
|
||||
"snowpack": "^3.8.8",
|
||||
"tailwindcss": "^2.2.8",
|
||||
"tailwindcss": "^2.2.11",
|
||||
"tar": "^6.1.11",
|
||||
"typescript": "^4.4.2"
|
||||
}
|
||||
|
||||
517
pnpm-lock.yaml
generated
517
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
|
||||
import { Listbox } from '@headlessui/react';
|
||||
import { CheckIcon, SelectorIcon } from '@heroicons/react/solid';
|
||||
import { SelectorIcon } from '@heroicons/react/solid';
|
||||
|
||||
export interface SelectProps {
|
||||
label: string;
|
||||
@@ -38,8 +38,8 @@ export const Select = ({
|
||||
<Listbox value={active.value} onChange={onChange}>
|
||||
<div className="relative mt-1">
|
||||
<Listbox.Button className="flex w-full text-left bg-white border rounded-md shadow-sm h-11 focus:outline-none focus:border-primary dark:focus:border-primary dark:bg-secondaryDark dark:border-gray-600 dark:text-white">
|
||||
<div className="">{active.icon}</div>
|
||||
<span className="block truncate">{active.name}</span>
|
||||
<div className="mx-2 my-auto">{active.icon}</div>
|
||||
<span className="block my-auto truncate">{active.name}</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||
<SelectorIcon
|
||||
className="w-5 h-5 text-gray-400"
|
||||
@@ -52,32 +52,25 @@ export const Select = ({
|
||||
{options.map((option) => (
|
||||
<Listbox.Option
|
||||
key={option.value}
|
||||
className={({ active }): string =>
|
||||
`cursor-default select-none relative py-2 pl-10 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
|
||||
active ? 'bg-gray-200 dark:bg-primaryDark' : 'text-gray-900'
|
||||
className={({ active, selected }): string =>
|
||||
`cursor-default select-none relative py-2 pr-4 first:rounded-t-md last:rounded-b-md dark:text-white ${
|
||||
active || selected
|
||||
? 'bg-gray-200 dark:bg-primaryDark'
|
||||
: 'text-gray-900'
|
||||
}`
|
||||
}
|
||||
value={option.value}
|
||||
>
|
||||
{({ selected, active }): JSX.Element => (
|
||||
{({ selected }): JSX.Element => (
|
||||
<>
|
||||
<span
|
||||
className={`${
|
||||
className={`flex truncate ${
|
||||
selected ? 'font-medium' : 'font-normal'
|
||||
} block truncate`}
|
||||
}`}
|
||||
>
|
||||
<div className="mx-4 my-auto">{option.icon}</div>
|
||||
{option.name}
|
||||
</span>
|
||||
{selected ? (
|
||||
<span
|
||||
className={`${
|
||||
active ? 'text-amber-600' : 'text-amber-600'
|
||||
}
|
||||
absolute inset-y-0 left-0 flex items-center pl-3`}
|
||||
>
|
||||
<CheckIcon className="w-5 h-5" aria-hidden="true" />
|
||||
</span>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
|
||||
@@ -47,11 +47,19 @@ export const Interface = ({
|
||||
<div className="w-full max-w-3xl space-y-2 md:max-w-xl">
|
||||
<Select
|
||||
label="Language"
|
||||
active={{
|
||||
name: '',
|
||||
value: '',
|
||||
icon: <Us />,
|
||||
}}
|
||||
active={
|
||||
i18n.language === 'en'
|
||||
? {
|
||||
name: 'English',
|
||||
value: 'en',
|
||||
icon: <Us />,
|
||||
}
|
||||
: i18n.language === 'pt'
|
||||
? { name: 'Português', value: 'pt', icon: <Pt /> }
|
||||
: i18n.language === 'jp'
|
||||
? { name: '日本', value: 'jp', icon: <Jp /> }
|
||||
: { name: 'English', value: 'en', icon: <Us /> }
|
||||
}
|
||||
onChange={(value): void => {
|
||||
void i18n.changeLanguage(value);
|
||||
}}
|
||||
@@ -68,7 +76,7 @@ export const Interface = ({
|
||||
icon: <Pt className="w-6" />,
|
||||
},
|
||||
{
|
||||
name: 'Japanese',
|
||||
name: '日本',
|
||||
value: 'jp',
|
||||
icon: <Jp className="w-6" />,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user