Navbar

"use client";
import { NavbarPillGroups } from "@/components/premium/navbar/navbar-pill-groups";
export function NavbarPillGroupsPreview() {
  return (
    <div className="min-h-160 w-full bg-background text-foreground">
      <NavbarPillGroups />
      <div className="mx-auto max-w-3xl px-6 py-24 text-center">
        <p className="mb-4 text-xs uppercase tracking-widest text-muted-foreground">
          Built around your ideas
        </p>
        <h2 className="text-balance text-4xl font-medium tracking-tight">
          A little more room to make things happen.
        </h2>
        <p className="mx-auto mt-4 max-w-lg text-sm leading-7 text-muted-foreground">
          Bring your team and your best work into the same space.
        </p>
      </div>
    </div>
  );
}

"use client";
import { NavbarMegaMenu } from "@/components/premium/navbar/navbar-mega-menu";
export function NavbarMegaMenuPreview() {
  return (
    <div className="relative isolate min-h-160 w-full overflow-hidden bg-background text-foreground [contain:layout_paint]">
      <NavbarMegaMenu />
      <div className="mx-auto max-w-3xl px-6 py-24 text-center">
        <p className="mb-4 text-xs uppercase tracking-widest text-muted-foreground">
          Space for your next idea
        </p>
        <h2 className="text-balance text-4xl font-medium tracking-tight">
          Good work starts with a clear view.
        </h2>
        <p className="mx-auto mt-4 max-w-lg text-sm leading-7 text-muted-foreground">
          Bring your people, projects, and possibilities together.
        </p>
      </div>
    </div>
  );
}

"use client";

import { NavbarMorph } from "@/components/premium/navbar";

export function NavbarMorphPreview() {
  return (
    <div className="min-h-[28rem] w-full pt-12">
      <NavbarMorph />
    </div>
  );
}

"use client";

import { NavbarFeatureMorph } from "@/components/premium/navbar";

export function NavbarFeatureMorphPreview() {
  return (
    <div className="min-h-[42rem] w-full pt-10">
      <NavbarFeatureMorph />
    </div>
  );
}

"use client";

import { useRef } from "react";
import { NavbarExpand } from "@/components/premium/navbar";

export function NavbarExpandPreview() {
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div className="w-full pt-10">
      <div
        ref={scrollRef}
        className="relative h-[26rem] w-full overflow-y-auto rounded-xl bg-background"
      >
        <NavbarExpand scrollContainerRef={scrollRef} />
        <div className="mx-auto max-w-3xl px-6 pt-16 pb-10">
          <p className="text-center text-muted-foreground text-xs">
            Scroll to expand the navigation
          </p>
          <div className="mt-8 grid gap-3 sm:grid-cols-2">
            {[
              "Product overview",
              "Agent workspace",
              "Usage controls",
              "Team activity",
              "API access",
              "Security",
            ].map((label) => (
              <div
                key={label}
                className="flex h-28 items-end rounded-2xl border border-border/50 p-4 text-muted-foreground text-xs"
              >
                {label}
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

"use client";

import { useRef } from "react";
import { NavbarSimple } from "@/components/premium/navbar";

export function NavbarSimplePreview() {
  const scrollRef = useRef<HTMLDivElement>(null);

  return (
    <div
      ref={scrollRef}
      className="relative h-[28rem] w-full overflow-y-auto bg-background"
    >
      <NavbarSimple scrollContainerRef={scrollRef} />
      <div className="mx-auto max-w-4xl px-6 pt-20 pb-12">
        <p className="font-medium text-muted-foreground text-xs uppercase tracking-[0.14em]">
          Product workspace
        </p>
        <h2 className="mt-3 max-w-xl font-semibold text-3xl text-foreground tracking-tight sm:text-4xl">
          A simple header that stays out of the way.
        </h2>
        <p className="mt-4 max-w-lg text-muted-foreground text-sm leading-6">
          Scroll this preview to see the transparent navigation settle into a
          lightly blurred surface.
        </p>
        <div className="mt-12 grid gap-3 sm:grid-cols-3">
          {[
            "Overview",
            "Activity",
            "Members",
            "Automations",
            "Reports",
            "Settings",
          ].map((label) => (
            <div
              key={label}
              className="flex h-24 items-end rounded-xl border border-border/45 p-4 text-muted-foreground text-xs"
            >
              {label}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}