sendnrw/netbird
2
0
Fork 0
mirror of https://github.com/netbirdio/netbird.git synced 2026-05-18 06:39:54 +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 && ( {active && (
<motion.span <motion.span
layoutId={layoutId} 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 }} transition={{ type: "spring", stiffness: 500, damping: 35 }}
/> />
)} )}
<span <span className={"relative inline-flex items-center justify-center gap-1"}>
className={"relative inline-flex items-center justify-center gap-1"}
>
{children} {children}
</span> </span>
</RadioGroup.Item> </RadioGroup.Item>

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

@@ -7,9 +7,7 @@ type SwitchItemGroupContextValue = {
layoutId: string; layoutId: string;
}; };
const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>( const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(null);
null,
);
export const useSwitchItemGroup = () => { export const useSwitchItemGroup = () => {
const ctx = useContext(SwitchItemGroupContext); const ctx = useContext(SwitchItemGroupContext);
@@ -35,7 +33,7 @@ export const SwitchItemGroup = ({ value, onChange, children, className }: Props)
value={value} value={value}
onValueChange={onChange} onValueChange={onChange}
className={cn( 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, className,
)} )}
> >

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

@@ -1,4 +1,6 @@
import { useState } from "react"; 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 { MainRightSide } from "@/layouts/MainRightSide.tsx";
import { VerticalTabs } from "@/components/VerticalTabs.tsx"; import { VerticalTabs } from "@/components/VerticalTabs.tsx";
import { SettingsNavigationTriggers } from "@/modules/settings/SettingsNavigationTriggers.tsx"; import { SettingsNavigationTriggers } from "@/modules/settings/SettingsNavigationTriggers.tsx";
@@ -18,31 +20,51 @@ export const Settings = () => {
<VerticalTabs value={active} onValueChange={setActive} className={"p-4"}> <VerticalTabs value={active} onValueChange={setActive} className={"p-4"}>
<SettingsNavigationTriggers /> <SettingsNavigationTriggers />
<MainRightSide> <MainRightSide>
<div className={"py-8 px-7"}> <ScrollArea.Root
<SettingsProvider> type={"auto"}
<VerticalTabs.Content value={"general"}> className={"flex-1 min-h-0 overflow-hidden"}
<SettingsGeneral /> >
</VerticalTabs.Content> <ScrollArea.Viewport className={"h-full w-full"}>
<VerticalTabs.Content value={"network"}> <div className={"py-8 px-7"}>
<SettingsNetwork /> <SettingsProvider>
</VerticalTabs.Content> <VerticalTabs.Content value={"general"}>
<VerticalTabs.Content value={"security"}> <SettingsGeneral />
<SettingsSecurity /> </VerticalTabs.Content>
</VerticalTabs.Content> <VerticalTabs.Content value={"network"}>
<VerticalTabs.Content value={"ssh"}> <SettingsNetwork />
<SettingsSSH /> </VerticalTabs.Content>
</VerticalTabs.Content> <VerticalTabs.Content value={"security"}>
<VerticalTabs.Content value={"advanced"}> <SettingsSecurity />
<SettingsAdvanced /> </VerticalTabs.Content>
</VerticalTabs.Content> <VerticalTabs.Content value={"ssh"}>
<VerticalTabs.Content value={"troubleshooting"}> <SettingsSSH />
<SettingsTroubleshooting /> </VerticalTabs.Content>
</VerticalTabs.Content> <VerticalTabs.Content value={"advanced"}>
<VerticalTabs.Content value={"about"}> <SettingsAdvanced />
<SettingsAbout /> </VerticalTabs.Content>
</VerticalTabs.Content> <VerticalTabs.Content value={"troubleshooting"}>
</SettingsProvider> <SettingsTroubleshooting />
</div> </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> </MainRightSide>
</VerticalTabs> </VerticalTabs>
); );