71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
|
|
import { twMerge } from 'tailwind-merge';
|
|
|
|
import { Frame } from '@shared/frame';
|
|
import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
|
|
|
|
export function SettingsLayout() {
|
|
return (
|
|
<div className="flex h-screen w-screen">
|
|
<Frame className="relative flex h-full w-[232px] flex-col" lighter>
|
|
<div data-tauri-drag-region className="h-11 w-full shrink-0" />
|
|
<div className="scrollbar-hide flex h-full flex-1 flex-col gap-2 overflow-y-auto pb-32">
|
|
<div className="inline-flex items-center gap-2 border-l-2 border-transparent pl-4">
|
|
<Link
|
|
to="/"
|
|
className="inline-flex h-7 w-7 items-center justify-center rounded hover:bg-white/10"
|
|
>
|
|
<ArrowLeftIcon className="h-4 w-4 text-white/50" />
|
|
</Link>
|
|
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
|
|
Settings
|
|
</h3>
|
|
</div>
|
|
<div className="flex flex-col pr-2">
|
|
<NavLink
|
|
to="/settings/"
|
|
className={({ isActive }) =>
|
|
twMerge(
|
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
|
isActive
|
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
|
: 'border-transparent text-white/80'
|
|
)
|
|
}
|
|
>
|
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
|
<SettingsIcon className="h-4 w-4 text-white" />
|
|
</span>
|
|
<span className="font-medium">General</span>
|
|
</NavLink>
|
|
<NavLink
|
|
to="/settings/backup"
|
|
className={({ isActive }) =>
|
|
twMerge(
|
|
'flex h-10 items-center gap-2.5 rounded-r-lg border-l-2 pl-4 pr-2',
|
|
isActive
|
|
? 'border-fuchsia-500 bg-white/5 text-white'
|
|
: 'border-transparent text-white/80'
|
|
)
|
|
}
|
|
>
|
|
<span className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded bg-white/10 backdrop-blur-xl">
|
|
<SecureIcon className="h-4 w-4 text-white" />
|
|
</span>
|
|
<span className="font-medium">Backup</span>
|
|
</NavLink>
|
|
</div>
|
|
</div>
|
|
</Frame>
|
|
<div className="h-full w-full flex-1 bg-black/90 backdrop-blur-xl">
|
|
<Outlet />
|
|
<ScrollRestoration
|
|
getKey={(location) => {
|
|
return location.pathname;
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|