Style and localize the preference section of settings

This commit is contained in:
mrjvs 2024-01-20 13:20:06 +01:00
parent f96a0de373
commit 741a35dee8
4 changed files with 41 additions and 20 deletions

View File

@ -408,10 +408,13 @@
"urlPlaceholder": "https://"
}
},
"locale": {
"preferences": {
"language": "Application language",
"languageDescription": "Language applied to the entire application.",
"title": "Locale"
"title": "Preferences",
"thumbnail": "Generate thumbnails",
"thumbnailDescription": "Most of the time, videos don't have thumbnails. You can enable this setting to generate them on the fly but they can make your video slower.",
"thumbnailLabel": "Generate thumbnails"
},
"reset": "Reset",
"save": "Save",

View File

@ -1,6 +1,6 @@
import classNames from "classnames";
export function Toggle(props: { onClick: () => void; enabled?: boolean }) {
export function Toggle(props: { onClick?: () => void; enabled?: boolean }) {
return (
<button
type="button"

View File

@ -1,5 +1,6 @@
import { useTranslation } from "react-i18next";
import { Toggle } from "@/components/buttons/Toggle";
import { FlagIcon } from "@/components/FlagIcon";
import { Dropdown } from "@/components/form/Dropdown";
import { Heading1 } from "@/components/utils/Text";
@ -28,22 +29,39 @@ export function PreferencesPart(props: {
);
return (
<div>
<Heading1 border>{t("settings.locale.title")}</Heading1>
<p className="text-white font-bold mb-3">
{t("settings.locale.language")}
</p>
<p className="max-w-[20rem] font-medium">
{t("settings.locale.languageDescription")}
</p>
<Dropdown
options={options}
selectedItem={selected || options[0]}
setSelectedItem={(opt) => props.setLanguage(opt.id)}
/>
<p onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}>
thumbnails: {props.enableThumbnails.toString()}
</p>
<div className="space-y-12">
<Heading1 border>{t("settings.preferences.title")}</Heading1>
<div>
<p className="text-white font-bold mb-3">
{t("settings.preferences.language")}
</p>
<p className="max-w-[20rem] font-medium">
{t("settings.preferences.languageDescription")}
</p>
<Dropdown
options={options}
selectedItem={selected || options[0]}
setSelectedItem={(opt) => props.setLanguage(opt.id)}
/>
</div>
<div>
<p className="text-white font-bold mb-3">
{t("settings.preferences.thumbnail")}
</p>
<p className="max-w-[25rem] font-medium">
{t("settings.preferences.thumbnailDescription")}
</p>
<div
onClick={() => props.setEnableThumbnails(!props.enableThumbnails)}
className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg"
>
<Toggle enabled={props.enableThumbnails} />
<p className="flex-1 text-white font-bold">
{t("settings.preferences.thumbnailLabel")}
</p>
</div>
</div>
</div>
);
}

View File

@ -44,7 +44,7 @@ export function SidebarPart() {
icon: Icons.USER,
},
{
textKey: "settings.locale.title",
textKey: "settings.preferences.title",
id: "settings-preferences",
icon: Icons.SETTINGS,
},