Simple navbar

public/nexa-text.svg

@@ -0,0 +1,14 @@
+<svg width="42" height="9" viewBox="0 0 42 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9_13)">
+<path d="M6.732 0.995999C6.732 0.843999 6.788 0.715999 6.9 0.611999C7.012 0.499999 7.148 0.443999 7.308 0.443999H7.884V9H6.708C6.588 9 6.492 8.952 6.42 8.856L0.972 1.836V4.704C0.972 4.856 0.916 4.988 0.804 5.1C0.692 5.204 0.556 5.256 0.396 5.256H-0.18V0.443999H0.984C1.104 0.443999 1.2 0.491999 1.272 0.588L6.732 7.608V0.995999ZM19.4827 8.484V9H11.0107V8.208C11.0107 8.128 11.0387 8.064 11.0947 8.016C11.1507 7.96 11.2147 7.932 11.2867 7.932H18.9067C19.0667 7.932 19.2027 7.988 19.3147 8.1C19.4267 8.204 19.4827 8.332 19.4827 8.484ZM19.3507 0.96C19.3507 1.112 19.2947 1.244 19.1827 1.356C19.0707 1.46 18.9347 1.512 18.7747 1.512H11.2987C11.2187 1.512 11.1507 1.484 11.0947 1.428C11.0387 1.372 11.0107 1.304 11.0107 1.224V0.443999H19.3507V0.96ZM11.0107 4.464C11.0107 4.392 11.0387 4.328 11.0947 4.272C11.1507 4.216 11.2147 4.188 11.2867 4.188H18.5707V4.704C18.5707 4.856 18.5147 4.988 18.4027 5.1C18.2907 5.204 18.1547 5.256 17.9947 5.256H11.0107V4.464ZM30.4834 0.443999L26.3914 4.716L30.4834 9H29.5114C29.2634 9 29.0474 8.904 28.8634 8.712L25.7194 5.424L22.5754 8.712C22.3914 8.904 22.1754 9 21.9274 9H20.8594C21.8434 7.968 24.4794 5.212 28.7674 0.732C28.9514 0.539999 29.1674 0.443999 29.4154 0.443999H30.4834ZM24.2194 3.168C24.1234 3.264 24.0114 3.312 23.8834 3.312C23.7554 3.312 23.6434 3.264 23.5474 3.168L20.9554 0.443999H21.9274C22.1754 0.443999 22.3914 0.539999 22.5754 0.732L24.5554 2.808L24.2194 3.168ZM36.3944 1.656C33.6104 6.36 32.1904 8.756 32.1344 8.844C32.0784 8.948 31.9904 9 31.8704 9H30.8024C32.9704 5.28 34.5304 2.596 35.4824 0.948C35.5624 0.796 35.6784 0.675999 35.8304 0.588C35.9904 0.491999 36.1624 0.443999 36.3464 0.443999H37.0184C37.7064 1.732 39.2304 4.584 41.5904 9H40.7144C40.4504 9 40.2544 8.884 40.1264 8.652C39.7904 8.012 39.3224 7.136 38.7224 6.024L36.3944 1.656Z" fill="url(#paint0_linear_9_13)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_9_13" x1="-3" y1="7" x2="44" y2="7" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6D45F9"/>
+<stop offset="1" stop-color="#00C688"/>
+</linearGradient>
+<clipPath id="clip0_9_13">
+<rect width="42" height="9" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/globals.css

@@ -48,6 +48,8 @@
 }
 
 :root {
+  --radius: 0.325rem;
+
   /* Base surfaces */
   --background: oklch(0.13 0.01 260);          /* deep charcoal */
   --foreground: oklch(0.98 0 0);
@@ -110,4 +112,17 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+body {
+  @apply bg-background text-foreground;
+}
+
+
+@font-face {
+  font-family: 'Researcher';
+  src: url('/font/researcher-regular-400.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }

src/app/markets/page.tsx

@@ -5,7 +5,7 @@ import Statusbar from "@/components/layout/Statusbar";
 
 export default function Markets() {
   return (
-    <main>
+    <main className="h-svh">
       <Navbar />
       <Statusbar />
     </main>

src/components/layout/Navbar.tsx

@@ -1,7 +1,38 @@
+import Link from "next/link";
+import { Button } from "../ui/button";
+
+const links = [
+  {
+    path: "/markets",
+    name: "Markets",
+  },
+  {
+    path: "/trackers",
+    name: "Trackers",
+  },
+];
+
 export default function Navbar() {
-    return (
+  return (
-        <header>
+    <nav className="border-b-2 border-b-border py-4 px-5 flex gap-5 items-center">
-            
+      <a href="/markets" className="flex gap-1 items-center">
-        </header>
+        <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="px-3 py-2 rounded-sm hover:bg-primary/20 hover:text-primary transition-colors duration-300"
+              >
+                {l.name}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </nav>
+  );
+}

src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }