84 lines
2.3 KiB
TypeScript
84 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { Button } from "../ui/button";
|
|
import {
|
|
BellIcon,
|
|
ChevronDownIcon,
|
|
StarIcon,
|
|
UserIcon,
|
|
WalletIcon,
|
|
} from "lucide-react";
|
|
import { SolanaLogo } from "../logos";
|
|
import { cn } from "@/lib/utils";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const links = [
|
|
{
|
|
path: "/markets",
|
|
name: "Markets",
|
|
},
|
|
{
|
|
path: "/trackers",
|
|
name: "Trackers",
|
|
},
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const personalItemClass =
|
|
"rounded-full bg-card p-2! aspect-square group hover:bg-accent/20 hover:text-accent";
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="border-b border-b-border py-4 px-5 flex gap-5 items-center">
|
|
<a href="/markets" className="flex gap-1 items-center">
|
|
<img src="/nexa.svg" alt="Nexa" className="h-7" />
|
|
<img src="/nexa-text.svg" alt="NEXA" className="h-5" />
|
|
</a>
|
|
<div>
|
|
<ul className="flex">
|
|
{links.map((l) => (
|
|
<li key={l.path}>
|
|
<Link
|
|
href={l.path}
|
|
className={cn(
|
|
"px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300",
|
|
l.path === pathname && "text-primary",
|
|
)}
|
|
>
|
|
{l.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="ml-auto flex gap-4">
|
|
<Button variant="outline" className={personalItemClass}>
|
|
<StarIcon />
|
|
</Button>
|
|
<Button variant="outline" className={personalItemClass}>
|
|
<BellIcon />
|
|
</Button>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<Button variant="outline" className={personalItemClass}>
|
|
<div className="flex gap-1 items-center h-full">
|
|
<WalletIcon />
|
|
<div className="flex items-center">
|
|
<SolanaLogo className="p-0.5" />
|
|
3.13
|
|
</div>
|
|
<span className="w-[1.5px] h-full ml-1 mr-1 bg-border group-hover:bg-accent/60 animate-colors duration-300" />
|
|
$248
|
|
<ChevronDownIcon />
|
|
</div>
|
|
</Button>
|
|
|
|
<Button variant="outline" className={personalItemClass}>
|
|
<UserIcon />
|
|
</Button>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|