Scales

"use client";
import { useState } from "react";
import { Scales } from "@/lab/aceternity/ui/scales";

const orientations = ["diagonal", "horizontal", "vertical"] as const;

/**
 * The Scales pattern itself is static. For the lab card the pointer sets the
 * pattern size (left → right) and a click cycles the orientation.
 */
export default function ScalesDemo() {
  const [size, setSize] = useState(10);
  const [index, setIndex] = useState(0);
  const orientation = orientations[index];

  return (
    <div
      className="@container relative h-full w-full cursor-pointer overflow-hidden bg-white select-none dark:bg-black"
      onPointerMove={(e) => {
        const rect = e.currentTarget.getBoundingClientRect();
        const t = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width));
        setSize(Math.round(6 + t * 22));
      }}
      onPointerLeave={() => setSize(10)}
      onClick={() => setIndex((i) => (i + 1) % orientations.length)}
    >
      <Scales orientation={orientation} size={size} />
      <div className="relative z-10 flex h-full flex-col items-center justify-center gap-2">
        <h2 className="text-[clamp(1.1rem,4cqw,2rem)] font-bold text-neutral-900 capitalize dark:text-white">
          {orientation} Scales
        </h2>
        <p className="font-mono text-[clamp(0.6rem,1.4cqw,0.8rem)] text-neutral-500">
          size {size}px · move to resize · click to rotate
        </p>
      </div>
    </div>
  );
}