sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-12 03:39:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

update switch

Browse Source
This commit is contained in:
Eduard Gert
2026-05-07 17:27:56 +02:00
parent 2c5d52a1bf
commit adeaa49cda
3 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/ui-wails/frontend/src/components/SwitchItem.tsx
View File

@@ -27,13 +27,11 @@ export const SwitchItem = ({ value, children }: Props) => {
{active && (
<motion.span
layoutId={layoutId}
className={"absolute inset-0 rounded-md bg-nb-gray-800"}
className={"absolute inset-0 rounded-md bg-nb-gray-700"}
transition={{ type: "spring", stiffness: 500, damping: 35 }}
/>
)}
<span
className={"relative inline-flex items-center justify-center gap-1"}
>
<span className={"relative inline-flex items-center justify-center gap-1"}>
{children}
</span>
</RadioGroup.Item>

6
client/ui-wails/frontend/src/components/SwitchItemGroup.tsx
View File

@@ -7,9 +7,7 @@ type SwitchItemGroupContextValue = {
layoutId: string;
};
const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(
null,
);
const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(null);
export const useSwitchItemGroup = () => {
const ctx = useContext(SwitchItemGroupContext);
@@ -35,7 +33,7 @@ export const SwitchItemGroup = ({ value, onChange, children, className }: Props)
value={value}
onValueChange={onChange}
className={cn(
"flex shrink-0 rounded-lg border border-nb-gray-850 bg-nb-gray-920 p-1",
"flex shrink-0 rounded-lg border border-nb-gray-850 bg-nb-gray-910 p-1",
className,
)}
>

72
client/ui-wails/frontend/src/modules/settings/Settings.tsx
View File

@@ -1,4 +1,6 @@
import { useState } from "react";
import * as ScrollArea from "@radix-ui/react-scroll-area";
import { cn } from "@/lib/cn";
import { MainRightSide } from "@/layouts/MainRightSide.tsx";
import { VerticalTabs } from "@/components/VerticalTabs.tsx";
import { SettingsNavigationTriggers } from "@/modules/settings/SettingsNavigationTriggers.tsx";
@@ -18,31 +20,51 @@ export const Settings = () => {
<VerticalTabs value={active} onValueChange={setActive} className={"p-4"}>
<SettingsNavigationTriggers />
<MainRightSide>
<div className={"py-8 px-7"}>
<SettingsProvider>
<VerticalTabs.Content value={"general"}>
<SettingsGeneral />
</VerticalTabs.Content>
<VerticalTabs.Content value={"network"}>
<SettingsNetwork />
</VerticalTabs.Content>
<VerticalTabs.Content value={"security"}>
<SettingsSecurity />
</VerticalTabs.Content>
<VerticalTabs.Content value={"ssh"}>
<SettingsSSH />
</VerticalTabs.Content>
<VerticalTabs.Content value={"advanced"}>
<SettingsAdvanced />
</VerticalTabs.Content>
<VerticalTabs.Content value={"troubleshooting"}>
<SettingsTroubleshooting />
</VerticalTabs.Content>
<VerticalTabs.Content value={"about"}>
<SettingsAbout />
</VerticalTabs.Content>
</SettingsProvider>
</div>
<ScrollArea.Root
type={"auto"}
className={"flex-1 min-h-0 overflow-hidden"}
>
<ScrollArea.Viewport className={"h-full w-full"}>
<div className={"py-8 px-7"}>
<SettingsProvider>
<VerticalTabs.Content value={"general"}>
<SettingsGeneral />
</VerticalTabs.Content>
<VerticalTabs.Content value={"network"}>
<SettingsNetwork />
</VerticalTabs.Content>
<VerticalTabs.Content value={"security"}>
<SettingsSecurity />
</VerticalTabs.Content>
<VerticalTabs.Content value={"ssh"}>
<SettingsSSH />
</VerticalTabs.Content>
<VerticalTabs.Content value={"advanced"}>
<SettingsAdvanced />
</VerticalTabs.Content>
<VerticalTabs.Content value={"troubleshooting"}>
<SettingsTroubleshooting />
</VerticalTabs.Content>
<VerticalTabs.Content value={"about"}>
<SettingsAbout />
</VerticalTabs.Content>
</SettingsProvider>
</div>
</ScrollArea.Viewport>
<ScrollArea.Scrollbar
orientation={"vertical"}
className={cn(
"flex select-none touch-none transition-colors",
"w-1.5 bg-transparent py-1",
)}
>
<ScrollArea.Thumb
className={
"flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
}
/>
</ScrollArea.Scrollbar>
</ScrollArea.Root>
</MainRightSide>
</VerticalTabs>
);