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

feat(ui): update ui consistent

Browse Source
This commit is contained in:
reya
2023-12-19 10:13:52 +07:00
parent ec2ac2dce3
commit d9e8d05db7
26 changed files with 669 additions and 517 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/navigation.tsx
+63 -36
View File
@@ -1,12 +1,16 @@
import { Link, NavLink } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { ActiveAccount } from '@shared/accounts/active';
import { ChatsIcon, ComposeIcon, HomeIcon, NwcIcon, RelayIcon } from '@shared/icons';
import { compactNumber } from '@utils/formater';
import {
DepotIcon,
HomeIcon,
NwcIcon,
PlusIcon,
RelayIcon,
SearchIcon,
} from '@shared/icons';
export function Navigation() {
const newMessages = 0;
return (
<div className="flex h-full w-full flex-col justify-between p-3">
<div className="flex flex-1 flex-col gap-5">
@@ -19,7 +23,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
@@ -27,33 +31,14 @@ export function Navigation() {
>
<HomeIcon className="h-6 w-6" />
</div>
<div className="text-sm font-medium text-black dark:text-white">Home</div>
</>
)}
</NavLink>
<NavLink
to="/chats"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'relative inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
'text-sm text-black dark:text-white',
isActive ? 'font-semibold' : 'font-medium'
)}
>
<ChatsIcon className="h-6 w-6" />
{newMessages > 0 ? (
<div className="absolute right-0 top-0 inline-flex h-5 w-5 items-center justify-center rounded-full bg-blue-500 text-[9px] font-medium text-white">
{compactNumber.format(newMessages)}
</div>
) : null}
Home
</div>
<div className="text-sm font-medium text-black dark:text-white">Chats</div>
</>
)}
</NavLink>
@@ -66,7 +51,7 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
@@ -74,7 +59,14 @@ export function Navigation() {
>
<RelayIcon className="h-6 w-6" />
</div>
<div className="text-sm font-medium text-black dark:text-white">Relays</div>
<div
className={twMerge(
'text-sm text-black dark:text-white',
isActive ? 'font-semibold' : 'font-medium'
)}
>
Relays
</div>
</>
)}
</NavLink>
@@ -87,15 +79,50 @@ export function Navigation() {
<>
<div
className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-lg',
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
)}
>
<RelayIcon className="h-6 w-6" />
<DepotIcon className="h-6 w-6" />
</div>
<div
className={twMerge(
'text-sm text-black dark:text-white',
isActive ? 'font-semibold' : 'font-medium'
)}
>
Depot
</div>
</>
)}
</NavLink>
<NavLink
to="/nwc"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-auto w-full items-center justify-center rounded-xl',
isActive
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-neutral-400'
)}
>
<NwcIcon className="h-6 w-6" />
</div>
<div
className={twMerge(
'text-sm text-black dark:text-white',
isActive ? 'font-semibold' : 'font-medium'
)}
>
Wallet
</div>
<div className="text-sm font-medium text-black dark:text-white">Depot</div>
</>
)}
</NavLink>
@@ -103,15 +130,15 @@ export function Navigation() {
<div className="flex shrink-0 flex-col gap-3 p-1">
<Link
to="/new/"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 text-black hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:text-white dark:hover:bg-blue-500"
className="flex aspect-square h-auto w-full items-center justify-center rounded-xl bg-black/10 text-black hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:text-white dark:hover:bg-blue-500"
>
<ComposeIcon className="h-5 w-5" />
<PlusIcon className="h-5 w-5" />
</Link>
<Link
to="/nwc"
className="flex aspect-square h-auto w-full items-center justify-center rounded-lg bg-neutral-100 hover:bg-blue-500 hover:text-white dark:bg-neutral-900 dark:hover:bg-blue-500"
className="flex aspect-square h-auto w-full items-center justify-center rounded-xl bg-black/10 hover:bg-blue-500 hover:text-white dark:bg-white/10 dark:hover:bg-blue-500"
>
<NwcIcon className="h-5 w-5" />
<SearchIcon className="h-5 w-5" />
</Link>
<ActiveAccount />
</div>