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

wip: ui

Browse Source
This commit is contained in:
Ren Amamiya
2023-10-09 11:30:52 +07:00
parent ced23341d2
commit 140b8a47bf
19 changed files with 105 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/shared/navigation.tsx
View File

@@ -1,13 +1,9 @@
import { NavLink, useNavigate } from 'react-router-dom';
import { NavLink } from 'react-router-dom';
import { twMerge } from 'tailwind-merge';
import { useStorage } from '@libs/storage/provider';
import { ActiveAccount } from '@shared/accounts/active';
import { ComposerModal } from '@shared/composer';
import {
ArrowLeftIcon,
ArrowRightIcon,
ChatsIcon,
CommunityIcon,
ExploreIcon,
@@ -18,148 +14,117 @@ import {
export function Navigation() {
return (
<div className="flex h-full w-full flex-col justify-between p-3">
<div className="flex flex-col gap-5">
<div className="flex flex-1 flex-col gap-5">
<NavLink
to="/"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<HomeIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Home
<HomeIcon className="h-6 w-6" />
</div>
<div className="text-sm text-black dark:text-white">Home</div>
</>
)}
</NavLink>
<NavLink
to="/chats"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<ChatsIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Chats
<ChatsIcon className="h-6 w-6" />
</div>
<div className="text-sm text-black dark:text-white">Chats</div>
</>
)}
</NavLink>
<NavLink
to="/communities"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<CommunityIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Groups
<CommunityIcon className="h-6 w-6" />
</div>
<div className="text-sm text-black dark:text-white">Groups</div>
</>
)}
</NavLink>
<NavLink
to="/relays"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<RelayIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Relays
<RelayIcon className="h-6 w-6" />
</div>
<div className="text-sm text-black dark:text-white">Relays</div>
</>
)}
</NavLink>
<NavLink
to="/explore"
preventScrollReset={true}
className="inline-flex flex-col items-center justify-center text-sm font-medium"
className="inline-flex flex-col items-center justify-center"
>
{({ isActive }) => (
<>
<div
className={twMerge(
'inline-flex aspect-square h-full w-full items-center justify-center rounded-lg',
isActive ? 'bg-black/20 text-white' : 'text-black/50 dark:text-white/50'
)}
>
<ExploreIcon className="h-6 w-6" />
</div>{' '}
<div
className={twMerge(
'',
isActive
? 'text-black dark:text-white'
? 'bg-black/10 text-black dark:bg-white/10 dark:text-white'
: 'text-black/50 dark:text-white/50'
)}
>
Explore
<ExploreIcon className="h-6 w-6" />
</div>
<div className="text-sm text-black dark:text-white">Explore</div>
</>
)}
</NavLink>
</div>
<div className="flex shrink-0 flex-col gap-3 p-1">
<ComposerModal />
<ActiveAccount />
</div>
</div>
);
}