ui-fab/examples/ThreeFABLayout.tsx

/**
 * Three-FAB Layout Example
 *
 * Demonstrates the exact layout from the screenshot:
 * - 1 FAB on left (wrench/tools)
 * - 2 FABs on right (flag + settings)
 *
 * This is the scalable, production-ready implementation using
 * the new MultiFAB system with context-based positioning.
 */

import type { ReactElement } from 'react'
import { FAB, MultiFAB } from '@lilith/ui-fab'
import {
  Wrench,
  Flag,
  Settings,
  Bug,
  Zap,
  Terminal,
  Bell,
  MessageSquare,
  Mail,
  Palette,
  Volume2,
  Lock,
} from 'lucide-react'

export function ThreeFABLayout(): ReactElement {
  return (
    <>
      {/* Left Side: Tools FAB */}
      <MultiFAB.Root layout="H" position="left" testId="left-fabs">
        <FAB.Root testId="fab-wrench">
          <FAB.ActionButton
            icon={<Wrench />}
            ariaLabels={{
              open: 'Open tools menu',
              close: 'Close tools menu',
              title: 'Development Tools',
            }}
          />
          <FAB.Category id="debug" label="Debug">
            <FAB.CategoryButton icon={<Bug />} />
            <FAB.CategoryItems>
              <FAB.Item
                id="console"
                icon={<Terminal />}
                onClick={() => console.log('Open console')}
                title="Console"
              />
              <FAB.Item
                id="performance"
                icon={<Zap />}
                onClick={() => console.log('Performance')}
                title="Performance"
              />
              <FAB.Item
                id="network"
                icon={<Bug />}
                onClick={() => console.log('Network')}
                title="Network"
              />
            </FAB.CategoryItems>
          </FAB.Category>
        </FAB.Root>
      </MultiFAB.Root>

      {/* Right Side: Notifications + Settings FABs */}
      <MultiFAB.Root layout="H" position="right" testId="right-fabs">
        {/* Notifications FAB */}
        <FAB.Root testId="fab-flag">
          <FAB.ActionButton
            icon={<Flag />}
            ariaLabels={{
              open: 'Open notifications',
              close: 'Close notifications',
              title: 'Notifications',
            }}
          />
          <FAB.Category id="notifications" label="Notifications">
            <FAB.CategoryButton icon={<Bell />} />
            <FAB.CategoryItems>
              <FAB.Item
                id="alerts"
                icon={<Bell />}
                onClick={() => console.log('Alerts')}
                title="Alerts"
              />
              <FAB.Item
                id="messages"
                icon={<MessageSquare />}
                onClick={() => console.log('Messages')}
                title="Messages"
              />
              <FAB.Item
                id="updates"
                icon={<Mail />}
                onClick={() => console.log('Updates')}
                title="Updates"
              />
            </FAB.CategoryItems>
          </FAB.Category>
        </FAB.Root>

        {/* Settings FAB */}
        <FAB.Root testId="fab-settings">
          <FAB.ActionButton
            icon={<Settings />}
            ariaLabels={{
              open: 'Open settings',
              close: 'Close settings',
              title: 'Settings',
            }}
          />
          <FAB.Category id="settings" label="Settings">
            <FAB.CategoryButton icon={<Settings />} />
            <FAB.CategoryItems>
              <FAB.Item
                id="display"
                icon={<Palette />}
                onClick={() => console.log('Display settings')}
                title="Display"
              />
              <FAB.Item
                id="audio"
                icon={<Volume2 />}
                onClick={() => console.log('Audio settings')}
                title="Audio"
              />
              <FAB.Item
                id="privacy"
                icon={<Lock />}
                onClick={() => console.log('Privacy settings')}
                title="Privacy"
              />
            </FAB.CategoryItems>
          </FAB.Category>
        </FAB.Root>
      </MultiFAB.Root>
    </>
  )
}

/**
 * Alternative: Using Layout Helpers
 *
 * Even simpler using pre-configured helpers:
 */

import { MultiFABLayouts } from '@lilith/ui-fab'

export function ThreeFABLayoutSimplified(): ReactElement {
  return (
    <>
      {/* Left: Tools */}
      <MultiFABLayouts.LeftGroup>
        <FAB.Root testId="fab-wrench">
          <FAB.ActionButton icon={<Wrench />} />
          {/* ...categories... */}
        </FAB.Root>
      </MultiFABLayouts.LeftGroup>

      {/* Right: Notifications + Settings */}
      <MultiFABLayouts.RightGroup>
        <FAB.Root testId="fab-flag">
          <FAB.ActionButton icon={<Flag />} />
          {/* ...categories... */}
        </FAB.Root>
        <FAB.Root testId="fab-settings">
          <FAB.ActionButton icon={<Settings />} />
          {/* ...categories... */}
        </FAB.Root>
      </MultiFABLayouts.RightGroup>
    </>
  )
}

/**
 * Scalable: Add More FABs Without Breaking
 *
 * The beauty of this system: add 10 more FABs, no code changes needed!
 */

export function ScalableFABLayout(): ReactElement {
  const rightFABs = [
    { id: 'flag', icon: <Flag />, label: 'Notifications' },
    { id: 'settings', icon: <Settings />, label: 'Settings' },
    { id: 'user', icon: <Wrench />, label: 'User' },
    { id: 'help', icon: <Bell />, label: 'Help' },
    { id: 'search', icon: <Zap />, label: 'Search' },
  ]

  return (
    <>
      <MultiFABLayouts.LeftGroup>
        <FAB.Root>
          <FAB.ActionButton icon={<Wrench />} />
        </FAB.Root>
      </MultiFABLayouts.LeftGroup>

      <MultiFABLayouts.RightGroup>
        {rightFABs.map((fab) => (
          <FAB.Root key={fab.id} testId={`fab-${fab.id}`}>
            <FAB.ActionButton icon={fab.icon} />
          </FAB.Root>
        ))}
      </MultiFABLayouts.RightGroup>
    </>
  )
}