Beam Balance

import { BeamBalance } from '@/components/ui/beam-balance'

import { BeamBalance } from '@/components/ui/beam-balance'

export default function BeamBalanceDemo() {
  return (
    <div className="mx-auto w-full max-w-lg px-4 py-10 sm:px-6 sm:py-14">
      <p className="mb-4 font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
        Spectacle · statics lab
      </p>
      <h2 className="mb-6 text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
        Stack weights until the needle rests on zero.
      </h2>
      <BeamBalance
        weights={[1, 2, 5, 10, 20]}
        unit="g"
        ariaLabel="Laboratory beam balance"
      />
      <p className="mt-4 text-sm leading-relaxed text-muted-foreground">
        Cycle each chip tray → left → right → tray. Match both pans and the
        equilibrium lamp lights, torque is honest, grams are quantized.
      </p>
    </div>
  )
}