Floating Panel

import * as React from 'react'
import { FloatingPanel } from '@hamur/react/floating-panel'
import type { FloatingPanelPosition, FloatingPanelSize } from '@hamur/react/floating-panel'

const MARGIN = 16
const NUDGE = 10

export default function FloatingPanelMoveExample() {
  const [position, setPosition] = React.useState<FloatingPanelPosition>({ x: MARGIN, y: MARGIN })
  const [size, setSize] = React.useState<FloatingPanelSize>({ width: 300, height: 240 })

  const room = () => {
    const root = document.documentElement
    return { x: root.clientWidth - size.width, y: root.clientHeight - size.height }
  }
  const corner = (right: boolean, bottom: boolean) => {
    const max = room()
    setPosition({ x: right ? max.x - MARGIN : MARGIN, y: bottom ? max.y - MARGIN : MARGIN })
  }
  const nudge = (dx: number, dy: number) => {
    const max = room()
    setPosition({
      x: Math.min(Math.max(position.x + dx, 0), max.x),
      y: Math.min(Math.max(position.y + dy, 0), max.y),
    })
  }

  return (
    <FloatingPanel.Root
      position={position}
      onPositionChange={setPosition}
      size={size}
      onSizeChange={setSize}
    >
      <FloatingPanel.Trigger className="button">
        Open panel
      </FloatingPanel.Trigger>
      <FloatingPanel.Portal>
        <FloatingPanel.Popup className="floating-panel">
          <FloatingPanel.DragHandle className="floating-panel-bar">
            <FloatingPanel.Title className="floating-panel-title">
              Position
            </FloatingPanel.Title>
            <FloatingPanel.Close
              className="floating-panel-button"
              aria-label="Close position"
            >
              <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">
            <output className="floating-panel-readout">
              {Math.round(position.x)}, {Math.round(position.y)}
            </output>
            <div className="floating-panel-grid" role="group" aria-label="Corners">
              <button type="button" className="button" onClick={() => corner(false, false)}>
                Top left
              </button>
              <button type="button" className="button" onClick={() => corner(true, false)}>
                Top right
              </button>
              <button type="button" className="button" onClick={() => corner(false, true)}>
                Bottom left
              </button>
              <button type="button" className="button" onClick={() => corner(true, true)}>
                Bottom right
              </button>
            </div>
            <div className="floating-panel-nudge" role="group" aria-label="Nudge by 10 pixels">
              <button type="button" className="button" onClick={() => nudge(-NUDGE, 0)}>
                Left
              </button>
              <button type="button" className="button" onClick={() => nudge(0, -NUDGE)}>
                Up
              </button>
              <button type="button" className="button" onClick={() => nudge(0, NUDGE)}>
                Down
              </button>
              <button type="button" className="button" onClick={() => nudge(NUDGE, 0)}>
                Right
              </button>
            </div>
          </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>
  )
}