📋 IntegratedNavigationWidget Demo

Test service setup navigation widget s step status tracking a responsive variantami.

⚙️ Varianta
⚡ Quick Actions
📊 Průběh
Hotovo:
1/6
V pokroku:
1/6
Zbývá:
4/6

Doporučeno:

Ceny

🔧 Stavy kroků
🖥️ Desktop Preview

Vše je hotovo! Služba je připravena k publikaci.

📖 Props API

serviceId: string

ID služby pro generování URL odkazů

steps: StepStatus[]

Stavy kroků: 'pending' | 'in_progress' | 'completed'

variant?: 'sidebar' | 'accordion'

Layout varianta (desktop sidebar vs. mobile accordion), výchozí: 'sidebar'

✨ Features
✓

6 Navigation Items

Základ, Ceny, Texty, Rozvrh, Termíny, Publikace

✓

Step Status Indicators

Completed (✓), In Progress (⟳), Pending (○)

✓

Active Route Highlighting

Vyznačení aktuálně otevřené sekce

✓

Recommendation Section

"Doporučeno" - zobrazuje další krok

✓

Responsive Design

Sidebar na desktop, Accordion na mobile

✓

WCAG AA Accessibility

44px touch targets, keyboard navigation

✓

Design Tokens

Bez hardcoded barev, používá shadcn paletu

💡 Příklad použití
import { IntegratedNavigationWidget } from '@/components/services/IntegratedNavigationWidget';

export function ServiceLayout({ serviceId }: { serviceId: string }) {
  const service = await getService(serviceId);

  return (
    <div className="grid grid-cols-3 gap-4">
      {/* Sidebar s navigací */}
      <aside className="hidden lg:block">
        <IntegratedNavigationWidget
          serviceId={serviceId}
          steps={{
            basic: service.basic ? 'completed' : 'pending',
            pricing: service.pricing ? 'completed' : 'pending',
            content: service.content ? 'completed' : 'pending',
            schedule: service.schedule ? 'completed' : 'pending',
            slots: service.slots ? 'completed' : 'pending',
            publish: service.publish ? 'completed' : 'pending',
          }}
          variant="sidebar"
        />
      </aside>

      {/* Mobile accordion */}
      <div className="lg:hidden mb-4">
        <IntegratedNavigationWidget
          serviceId={serviceId}
          steps={/* ... */}
          variant="accordion"
        />
      </div>

      {/* Main content */}
      <main className="col-span-2 lg:col-span-2">
        {/* Page content */}
      </main>
    </div>
  );
}
✅ Checklist testů