@girardmedia/bootspring 1.2.0 → 2.0.3

package/skills/patterns/ui/navigation.md

@@ -1,374 +0,0 @@
-# Navigation Patterns
-
-Patterns for building navigation components.
-
-## Header Navigation
-
-```tsx
-// components/layout/Header.tsx
-import Link from 'next/link'
-import { auth } from '@/auth'
-
-const navItems = [
-  { href: '/features', label: 'Features' },
-  { href: '/pricing', label: 'Pricing' },
-  { href: '/docs', label: 'Docs' }
-]
-
-export async function Header() {
-  const session = await auth()
-
-  return (
-    <header className="sticky top-0 z-50 border-b bg-white">
-      <nav className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4">
-        <div className="flex items-center gap-8">
-          <Link href="/" className="text-xl font-bold">
-            Logo
-          </Link>
-
-          <ul className="hidden gap-6 md:flex">
-            {navItems.map(item => (
-              <li key={item.href}>
-                <Link
-                  href={item.href}
-                  className="text-gray-600 hover:text-gray-900"
-                >
-                  {item.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-
-        <div className="flex items-center gap-4">
-          {session ? (
-            <UserMenu user={session.user} />
-          ) : (
-            <>
-              <Link href="/login">Sign in</Link>
-              <Link
-                href="/signup"
-                className="rounded-lg bg-black px-4 py-2 text-white"
-              >
-                Get Started
-              </Link>
-            </>
-          )}
-        </div>
-      </nav>
-    </header>
-  )
-}
-```
-
-## Mobile Navigation
-
-```tsx
-// components/layout/MobileNav.tsx
-'use client'
-
-import { useState } from 'react'
-import Link from 'next/link'
-import { Menu, X } from 'lucide-react'
-
-export function MobileNav({ items }: { items: NavItem[] }) {
-  const [isOpen, setIsOpen] = useState(false)
-
-  return (
-    <div className="md:hidden">
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="p-2"
-        aria-label="Toggle menu"
-      >
-        {isOpen ? <X /> : <Menu />}
-      </button>
-
-      {isOpen && (
-        <div className="absolute left-0 right-0 top-16 border-b bg-white p-4">
-          <ul className="space-y-4">
-            {items.map(item => (
-              <li key={item.href}>
-                <Link
-                  href={item.href}
-                  onClick={() => setIsOpen(false)}
-                  className="block py-2"
-                >
-                  {item.label}
-                </Link>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  )
-}
-```
-
-## Sidebar Navigation
-
-```tsx
-// components/layout/Sidebar.tsx
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-import { Home, Users, Settings, BarChart } from 'lucide-react'
-
-const sidebarItems = [
-  { href: '/dashboard', label: 'Dashboard', icon: Home },
-  { href: '/dashboard/users', label: 'Users', icon: Users },
-  { href: '/dashboard/analytics', label: 'Analytics', icon: BarChart },
-  { href: '/dashboard/settings', label: 'Settings', icon: Settings }
-]
-
-export function Sidebar() {
-  const pathname = usePathname()
-
-  return (
-    <aside className="w-64 border-r bg-gray-50">
-      <nav className="p-4">
-        <ul className="space-y-1">
-          {sidebarItems.map(item => {
-            const isActive = pathname === item.href ||
-              (item.href !== '/dashboard' && pathname.startsWith(item.href))
-
-            return (
-              <li key={item.href}>
-                <Link
-                  href={item.href}
-                  className={`flex items-center gap-3 rounded-lg px-3 py-2 ${
-                    isActive
-                      ? 'bg-gray-200 text-gray-900'
-                      : 'text-gray-600 hover:bg-gray-100'
-                  }`}
-                >
-                  <item.icon className="h-5 w-5" />
-                  {item.label}
-                </Link>
-              </li>
-            )
-          })}
-        </ul>
-      </nav>
-    </aside>
-  )
-}
-```
-
-## Breadcrumbs
-
-```tsx
-// components/ui/Breadcrumbs.tsx
-import Link from 'next/link'
-import { ChevronRight, Home } from 'lucide-react'
-
-interface BreadcrumbItem {
-  label: string
-  href?: string
-}
-
-export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
-  return (
-    <nav aria-label="Breadcrumb" className="flex items-center gap-2 text-sm">
-      <Link href="/" className="text-gray-500 hover:text-gray-700">
-        <Home className="h-4 w-4" />
-      </Link>
-
-      {items.map((item, index) => (
-        <div key={index} className="flex items-center gap-2">
-          <ChevronRight className="h-4 w-4 text-gray-400" />
-          {item.href ? (
-            <Link
-              href={item.href}
-              className="text-gray-500 hover:text-gray-700"
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <span className="text-gray-900">{item.label}</span>
-          )}
-        </div>
-      ))}
-    </nav>
-  )
-}
-
-// Generate from pathname
-export function useBreadcrumbs() {
-  const pathname = usePathname()
-
-  const items: BreadcrumbItem[] = pathname
-    .split('/')
-    .filter(Boolean)
-    .map((segment, index, arr) => ({
-      label: segment.charAt(0).toUpperCase() + segment.slice(1),
-      href: index === arr.length - 1 ? undefined : '/' + arr.slice(0, index + 1).join('/')
-    }))
-
-  return items
-}
-```
-
-## Tab Navigation
-
-```tsx
-// components/ui/Tabs.tsx
-'use client'
-
-import Link from 'next/link'
-import { usePathname } from 'next/navigation'
-
-interface Tab {
-  href: string
-  label: string
-}
-
-export function Tabs({ tabs }: { tabs: Tab[] }) {
-  const pathname = usePathname()
-
-  return (
-    <div className="border-b">
-      <nav className="-mb-px flex gap-4">
-        {tabs.map(tab => {
-          const isActive = pathname === tab.href
-
-          return (
-            <Link
-              key={tab.href}
-              href={tab.href}
-              className={`border-b-2 px-1 py-3 text-sm font-medium ${
-                isActive
-                  ? 'border-black text-black'
-                  : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
-              }`}
-            >
-              {tab.label}
-            </Link>
-          )
-        })}
-      </nav>
-    </div>
-  )
-}
-
-// Usage
-<Tabs
-  tabs={[
-    { href: '/settings', label: 'General' },
-    { href: '/settings/profile', label: 'Profile' },
-    { href: '/settings/billing', label: 'Billing' },
-    { href: '/settings/notifications', label: 'Notifications' }
-  ]}
-/>
-```
-
-## Dropdown Menu
-
-```tsx
-// components/ui/DropdownMenu.tsx
-'use client'
-
-import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu'
-import { ChevronDown } from 'lucide-react'
-
-export function DropdownMenu({ trigger, items }: {
-  trigger: React.ReactNode
-  items: { label: string; onClick?: () => void; href?: string }[]
-}) {
-  return (
-    <DropdownPrimitive.Root>
-      <DropdownPrimitive.Trigger asChild>
-        {trigger}
-      </DropdownPrimitive.Trigger>
-
-      <DropdownPrimitive.Portal>
-        <DropdownPrimitive.Content
-          className="min-w-[160px] rounded-lg bg-white p-1 shadow-lg"
-          sideOffset={5}
-        >
-          {items.map((item, i) => (
-            <DropdownPrimitive.Item
-              key={i}
-              className="cursor-pointer rounded px-3 py-2 text-sm outline-none hover:bg-gray-100"
-              onClick={item.onClick}
-            >
-              {item.href ? (
-                <a href={item.href}>{item.label}</a>
-              ) : (
-                item.label
-              )}
-            </DropdownPrimitive.Item>
-          ))}
-        </DropdownPrimitive.Content>
-      </DropdownPrimitive.Portal>
-    </DropdownPrimitive.Root>
-  )
-}
-```
-
-## Command Palette
-
-```tsx
-// components/ui/CommandPalette.tsx
-'use client'
-
-import { useState, useEffect } from 'react'
-import { Command } from 'cmdk'
-
-export function CommandPalette() {
-  const [open, setOpen] = useState(false)
-
-  useEffect(() => {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen(o => !o)
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [])
-
-  return (
-    <Command.Dialog open={open} onOpenChange={setOpen} className="fixed inset-0 z-50">
-      <div className="fixed inset-0 bg-black/50" />
-      <div className="fixed left-1/2 top-1/4 w-full max-w-lg -translate-x-1/2 rounded-lg bg-white shadow-xl">
-        <Command.Input
-          placeholder="Search..."
-          className="w-full border-b p-4 outline-none"
-        />
-        <Command.List className="max-h-80 overflow-auto p-2">
-          <Command.Empty className="p-4 text-center text-gray-500">
-            No results found.
-          </Command.Empty>
-
-          <Command.Group heading="Pages">
-            <Command.Item onSelect={() => navigate('/dashboard')}>
-              Dashboard
-            </Command.Item>
-            <Command.Item onSelect={() => navigate('/settings')}>
-              Settings
-            </Command.Item>
-          </Command.Group>
-
-          <Command.Group heading="Actions">
-            <Command.Item onSelect={() => createNew()}>
-              Create New...
-            </Command.Item>
-          </Command.Group>
-        </Command.List>
-      </div>
-    </Command.Dialog>
-  )
-}
-```
-
-## When to Use
-
-- Site navigation
-- Dashboard layouts
-- Multi-page forms
-- Admin interfaces