Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2025-02-22 05:29:31 +01:00
Code Releases Wiki Activity

Add LanguageSwitcher component to OnboardingDialog and update its visibility logic

Browse Source
This commit is contained in:
Nayam Amarshe 2024-12-25 18:37:09 +05:30
parent f8dd86b4b2
commit 4f39acfc6f
2 changed files with 24 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
renderer/components/main-content/onboarding-dialog.tsx
View File

@ -15,6 +15,7 @@ import {
} from "@/atoms/user-settings-atom";
import { useAtom } from "jotai";
import useTranslation from "../hooks/use-translation";
import LanguageSwitcher from "../sidebar/settings-tab/language-switcher";
type OnboardingStep = {
title: string;
@ -44,6 +45,14 @@ export function OnboardingDialog() {
title: t("ONBOARDING_DIALOG.STEP_1.TITLE"),
description: t("ONBOARDING_DIALOG.STEP_1.DESCRIPTION"),
type: "info",
configurationOptions: [
{
type: "component",
label: t("SETTINGS.LANGUAGE.TITLE"),
component: <LanguageSwitcher hideLabel={true} />,
key: "theme",
},
],
},
{
title: t("ONBOARDING_DIALOG.STEP_2.TITLE"),
@ -142,7 +151,7 @@ export function OnboardingDialog() {
<div
className={cn(
"flex h-full w-full flex-col rounded-sm bg-primary p-8",
currentStepData.type === "settings" && "h-auto w-auto gap-8",
"h-auto w-auto gap-8",
currentStepData.configurationOptions[0].type === "video" && "p-0",
)}
>

24
renderer/components/sidebar/settings-tab/language-switcher.tsx
View File

@ -13,27 +13,31 @@ const locales = {
pt: "Português (Portugal)",
};
const LanguageSwitcher = () => {
const LanguageSwitcher = ({ hideLabel = false }: { hideLabel?: boolean }) => {
const setLocale = useSetAtom(localeAtom);
const t = useAtomValue(translationAtom);
return (
<div>
<div className="flex flex-col gap-2">
<p className="text-sm font-medium">{t("SETTINGS.LANGUAGE.TITLE")}</p>
{!hideLabel && (
<p className="text-sm font-medium">{t("SETTINGS.LANGUAGE.TITLE")}</p>
)}
<select
data-choose-theme
className="select select-primary"
onChange={(e) => setLocale(e.target.value as keyof typeof locales)}
>
{Object.entries(locales).map((entry) => {
const [locale, label] = entry;
return (
<option value={locale} key={locale}>
{label.toLocaleUpperCase()}
</option>
);
})}
{Object.entries(locales)
.sort(([, a], [, b]) => a.localeCompare(b))
.map((entry) => {
const [locale, label] = entry;
return (
<option value={locale} key={locale}>
{label.toLocaleUpperCase()}
</option>
);
})}
</select>
</div>
</div>