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

chore: monorepo

Browse Source
This commit is contained in:
reya
2023-12-25 14:28:39 +07:00
parent a6da07cd3f
commit 227c2ddefa
374 changed files with 19966 additions and 12758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
packages/ui/src/navigation.tsx Normal file
View File

@@ -0,0 +1,155 @@
import {
DepotIcon,
HomeIcon,
NwcIcon,
PlusIcon,
RelayIcon,
SearchIcon,
} from "@lume/icons";
import { Link, NavLink } from "react-router-dom";
import { twMerge } from "tailwind-merge";
import { ActiveAccount } from "./account/active";
export function Navigation() {
return (
<div className="flex h-full w-20 shrink-0 flex-col justify-between px-4 py-3">
<div className="flex flex-1 flex-col gap-5">
<NavLink
to="/"
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",
)}
>
<HomeIcon className="h-6 w-6" />
</div>
<div
className={twMerge(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Home
</div>
</>
)}
</NavLink>
<NavLink
to="/relays"
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",
)}
>
<RelayIcon className="h-6 w-6" />
</div>
<div
className={twMerge(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Relays
</div>
</>
)}
</NavLink>
<NavLink
to="/depot"
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",
)}
>
<DepotIcon className="h-6 w-6" />
</div>
<div
className={twMerge(
"text-sm",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
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",
isActive
? "font-semibold text-black dark:text-white"
: "font-medium text-black/50 dark:text-white/50",
)}
>
Wallet
</div>
</>
)}
</NavLink>
</div>
<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-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"
>
<PlusIcon className="h-5 w-5" />
</Link>
<Link
to="/nwc"
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"
>
<SearchIcon className="h-5 w-5" />
</Link>
<ActiveAccount />
</div>
</div>
);
}