Floating Panel in five frameworks

import { FloatingPanel } from '@hamur/react/floating-panel'

const layers = ['Header', 'Hero image', 'Headline', 'Body copy', 'Sign-up form', 'Footer']

export default function FloatingPanelExample() {
  return (
    <FloatingPanel.Root defaultSize={{ width: 320, height: 260 }}>
      <FloatingPanel.Trigger className="button">
        Open layers
      </FloatingPanel.Trigger>
      <FloatingPanel.Portal>
        <FloatingPanel.Popup className="floating-panel">
          <FloatingPanel.DragHandle className="floating-panel-bar">
            <FloatingPanel.Title className="floating-panel-title">
              Layers
            </FloatingPanel.Title>
            <FloatingPanel.Minimize className="floating-panel-button">
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M5 12h14" />
              </svg>
            </FloatingPanel.Minimize>
            <FloatingPanel.Maximize className="floating-panel-button">
              <svg className="floating-panel-icon-maximize" viewBox="0 0 24 24" aria-hidden="true">
                <rect width="16" height="16" x="4" y="4" />
              </svg>
              <svg className="floating-panel-icon-restore" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M8 8V4h12v12h-4M4 8h12v12H4z" />
              </svg>
            </FloatingPanel.Maximize>
            <FloatingPanel.Close
              className="floating-panel-button"
              aria-label="Close layers"
            >
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M18 6 6 18M6 6l12 12" />
              </svg>
            </FloatingPanel.Close>
          </FloatingPanel.DragHandle>
          <FloatingPanel.Body className="floating-panel-body">
            <FloatingPanel.Description className="muted">
              Drag the title bar to move the panel. Focused, the arrow keys move it and Alt with the
              arrow keys resizes it.
            </FloatingPanel.Description>
            <ul className="floating-panel-list">
              {layers.map((layer) => (
                <li key={layer}>{layer}</li>
              ))}
            </ul>
          </FloatingPanel.Body>
          <FloatingPanel.ResizeHandle
            className="floating-panel-resize"
            position="bottom-right"
          >
            <svg viewBox="0 0 24 24" aria-hidden="true">
              <path d="M21 13 13 21M21 19l-2 2" />
            </svg>
          </FloatingPanel.ResizeHandle>
        </FloatingPanel.Popup>
      </FloatingPanel.Portal>
    </FloatingPanel.Root>
  )
}