Breadcrumb Morph Navbar

import { NavbarBreadcrumbMorph } from '@/components/blocks/navbar-breadcrumb-morph'

'use client'

import { useState } from 'react'
import { NavbarBreadcrumbMorph } from '@/components/blocks/navbar-breadcrumb-morph'

const LINKS = [
  { label: 'Projects', href: '/projects' },
  { label: 'Teams', href: '/teams' },
  { label: 'Billing', href: '/billing' },
  { label: 'Settings', href: '/settings' },
]

const TRAIL = [
  { label: 'Projects', href: '/projects' },
  { label: 'Northwind ERP', href: '/projects/northwind' },
  { label: 'Sprint 24', href: '/projects/northwind/sprints/24' },
  { label: 'Board', href: '/projects/northwind/sprints/24/board' },
]

export default function NavbarBreadcrumbMorphDemo() {
  const [depth, setDepth] = useState(0)

  return (
    <div className="min-h-[520px] bg-background">
      <NavbarBreadcrumbMorph
        brand={
          <span className="inline-flex items-baseline gap-1.5">
            Ledger
            <span className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted-foreground">
              desk
            </span>
          </span>
        }
        links={LINKS}
        trail={TRAIL}
        depth={depth}
        cta={{ label: 'New issue', href: '#' }}
      />

      <div className="mx-auto max-w-6xl px-4 py-10 sm:px-6">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
          Depth control
        </p>
        <h1 className="mt-2 max-w-xl text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
          Watch the active section become the first crumb.
        </h1>
        <p className="mt-3 max-w-lg text-sm leading-relaxed text-muted-foreground">
          Step through a project path. At depth 0 the bar shows top-level destinations;
          deeper levels morph into a breadcrumb trail with layout continuity on Projects.
        </p>

        <div className="mt-8 flex flex-wrap items-center gap-2">
          <button
            type="button"
            onClick={() => setDepth((d) => Math.max(0, d - 1))}
            disabled={depth === 0}
            className="inline-flex h-10 items-center rounded-lg border border-border/60 bg-card px-3 text-sm font-medium text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Shallower
          </button>
          <button
            type="button"
            onClick={() => setDepth((d) => Math.min(TRAIL.length, d + 1))}
            disabled={depth >= TRAIL.length}
            className="inline-flex h-10 items-center rounded-lg border border-border/60 bg-card px-3 text-sm font-medium text-foreground transition-colors hover:bg-accent disabled:pointer-events-none disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:outline-hidden"
          >
            Deeper
          </button>
          <span className="ml-2 font-mono text-xs text-muted-foreground">
            depth {depth}
            {depth > 0 && (
              <>
                {' · '}
                {TRAIL.slice(0, depth)
                  .map((t) => t.label)
                  .join(' / ')}
              </>
            )}
          </span>
        </div>

        <div className="mt-12 space-y-3">
          {[
            'Backlog grooming · 14 open issues',
            'API contract review · Northwind payments',
            'Release checklist · staging green',
          ].map((line) => (
            <div
              key={line}
              className="rounded-2xl border border-border/60 bg-card px-5 py-4 text-sm text-muted-foreground"
            >
              {line}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}