reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update settings screen

Browse Source
This commit is contained in:
Ren Amamiya
2023-08-31 08:51:23 +07:00
parent c29ed9669e
commit f2eb7a90ad
20 changed files with 305 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/shared/layouts/settings.tsx
View File

@@ -1,60 +1,58 @@
import { NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
import { Link, NavLink, Outlet, ScrollRestoration } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ArrowLeftIcon, SecureIcon, SettingsIcon } from '@shared/icons';
export function SettingsLayout() {
return (
<div className="flex h-screen w-screen">
<div className="relative flex shrink-0 flex-row bg-black/80 pt-12">
<div className="relative flex w-[232px] flex-col gap-3">
<div className="scrollbar-hide flex flex-col gap-5 overflow-y-auto pb-20">
<div className="flex flex-col gap-0.5 px-1.5">
<div className="px-2.5">
<h3 className="text-[11px] font-bold uppercase tracking-widest text-white/50">
Settings
</h3>
</div>
<div className="flex flex-col">
<NavLink
to="/settings/general"
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
<span className="font-medium">General</span>
</NavLink>
<NavLink
to="/settings/shortcuts"
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
<span className="font-medium">Shortcuts</span>
</NavLink>
<NavLink
to="/settings/account"
className={({ isActive }) =>
twMerge(
'flex h-9 items-center gap-2.5 rounded-md px-2.5',
isActive
? 'bg-white/10 text-white backdrop-blur-xl'
: 'text-white/80'
)
}
>
<span className="font-medium">Account</span>
</NavLink>
</div>
</div>
<div className="relative flex h-full w-[232px] flex-col bg-black/80">
<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>
</div>