Keyboard

"use client";
import React, { useEffect, useRef, useState } from "react";
import { Keyboard } from "@/lab/aceternity/ui/keyboard";

export default function KeyboardDemo() {
  const stageRef = useRef<HTMLDivElement>(null);
  const innerRef = useRef<HTMLDivElement>(null);
  const [zoom, setZoom] = useState(1);

  // The original zooms by viewport breakpoint; here the keyboard is zoomed to fit the stage.
  useEffect(() => {
    const stage = stageRef.current;
    const inner = innerRef.current;
    if (!stage || !inner) return;
    const fit = () => {
      const w = inner.offsetWidth;
      const h = inner.offsetHeight;
      if (!w || !h) return;
      setZoom(
        Math.max(
          0.5,
          Math.min((stage.clientWidth * 0.86) / w, (stage.clientHeight * 0.8) / h),
        ),
      );
    };
    const ro = new ResizeObserver(fit);
    ro.observe(stage);
    ro.observe(inner);
    return () => ro.disconnect();
  }, []);

  return (
    <div
      ref={stageRef}
      className="relative flex h-full w-full items-center justify-center overflow-hidden"
    >
      <div style={{ zoom }}>
        <div ref={innerRef}>
          <Keyboard className="[zoom:1] sm:[zoom:1] md:[zoom:1] lg:[zoom:1] xl:[zoom:1]" />
        </div>
      </div>
    </div>
  );
}