jnd/beszel-ipv6
1
0
Fork 0
mirror of https://github.com/henrygd/beszel.git synced 2025-12-17 10:46:16 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

add Turkish lang + style updates

Browse Source
This commit is contained in:
Henry Dollman
2024-10-31 18:57:54 -04:00
parent 94f771fc1c
commit f65d19ad84
7 changed files with 286 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
beszel/site/src/components/lang-toggle.tsx
View File

@@ -24,13 +24,13 @@ export function LangToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
{languages.map(({ lang, label }) => (
{languages.map(({ lang, label, e }) => (
<DropdownMenuItem
key={lang}
className={cn("pl-4 tracking-wide", lang === i18n.language ? "font-bold" : "")}
className={cn("ps-2.5 pe-4 flex gap-2.5", lang === i18n.language ? "font-bold" : "")}
onClick={() => setLang(lang)}
>
{label}
<span>{e}</span> {label}
</DropdownMenuItem>
))}
</DropdownMenuContent>

46
beszel/site/src/components/mode-toggle.tsx
View File

@@ -4,10 +4,29 @@ import { Button } from "@/components/ui/button"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { useTheme } from "@/components/theme-provider"
import { useTranslation } from "react-i18next"
import { cn } from "@/lib/utils"
export function ModeToggle() {
const { t } = useTranslation()
const { setTheme } = useTheme()
const { theme, setTheme } = useTheme()
const options = [
{
theme: "light",
Icon: SunIcon,
label: t("themes.light"),
},
{
theme: "dark",
Icon: MoonStarIcon,
label: t("themes.dark"),
},
{
theme: "system",
Icon: LaptopIcon,
label: t("themes.system"),
},
]
return (
<DropdownMenu>
@@ -19,18 +38,19 @@ export function ModeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={() => setTheme("light")}>
<SunIcon className="mr-2.5 h-4 w-4" />
{t("themes.light")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("dark")}>
<MoonStarIcon className="mr-2.5 h-4 w-4" />
{t("themes.dark")}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setTheme("system")}>
<LaptopIcon className="mr-2.5 h-4 w-4" />
{t("themes.system")}
</DropdownMenuItem>
{options.map((opt) => {
const selected = opt.theme === theme
return (
<DropdownMenuItem
key={opt.theme}
className={cn("px-2.5", selected ? "font-semibold" : "")}
onClick={() => setTheme(opt.theme as "dark" | "light" | "system")}
>
<opt.Icon className={cn("me-2 h-4 w-4 opacity-80", selected && "opacity-100")} />
{opt.label}
</DropdownMenuItem>
)
})}
</DropdownMenuContent>
</DropdownMenu>
)

12
beszel/site/src/components/navbar.tsx
View File

@@ -67,31 +67,31 @@ export default function Navbar() {
<>
<DropdownMenuItem asChild>
<a href="/_/" target="_blank">
<UsersIcon className="mr-2.5 h-4 w-4" />
<UsersIcon className="me-2.5 h-4 w-4" />
<span>{t("user_dm.users")}</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="/_/#/collections?collectionId=2hz5ncl8tizk5nx" target="_blank">
<ServerIcon className="mr-2.5 h-4 w-4" />
<ServerIcon className="me-2.5 h-4 w-4" />
<span>{t("systems")}</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="/_/#/logs" target="_blank">
<LogsIcon className="mr-2.5 h-4 w-4" />
<LogsIcon className="me-2.5 h-4 w-4" />
<span>{t("user_dm.logs")}</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="/_/#/settings/backups" target="_blank">
<DatabaseBackupIcon className="mr-2.5 h-4 w-4" />
<DatabaseBackupIcon className="me-2.5 h-4 w-4" />
<span>{t("user_dm.backups")}</span>
</a>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<a href="/_/#/settings/auth-providers" target="_blank">
<LockKeyholeIcon className="mr-2.5 h-4 w-4" />
<LockKeyholeIcon className="me-2.5 h-4 w-4" />
<span>{t("user_dm.auth_providers")}</span>
</a>
</DropdownMenuItem>
@@ -100,7 +100,7 @@ export default function Navbar() {
)}
</DropdownMenuGroup>
<DropdownMenuItem onSelect={() => pb.authStore.clear()}>
<LogOutIcon className="mr-2.5 h-4 w-4" />
<LogOutIcon className="me-2.5 h-4 w-4" />
<span>{t("user_dm.log_out")}</span>
</DropdownMenuItem>
</DropdownMenuContent>

1
beszel/site/src/components/routes/settings/general.tsx
View File

@@ -67,6 +67,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
<SelectContent>
{languages.map((lang) => (
<SelectItem key={lang.lang} value={lang.lang}>
<span className="me-2.5">{lang.e}</span>
{lang.label}
</SelectItem>
))}

6
beszel/site/src/components/ui/dropdown-menu.tsx
View File

@@ -25,7 +25,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
<DropdownMenuPrimitive.SubTrigger
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
"flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
inset && "pl-8",
className
)}
@@ -79,7 +79,7 @@ const DropdownMenuItem = React.forwardRef<
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex cursor-default select-none items-center rounded-sm px-2.5 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
inset && "pl-8",
className
)}
@@ -141,7 +141,7 @@ const DropdownMenuLabel = React.forwardRef<
>(({ className, inset, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
className={cn("px-2.5 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
{...props}
/>
))