strudel-docker/website/src/repl/components/incrementor/Incrementor.jsx

import { Textbox } from '../textbox/Textbox';
import cx from '@src/cx.mjs';

function IncButton({ children, className, ...buttonProps }) {
  return (
    <button
      tabIndex={-1}
      className={cx(
        'border border-transparent p-1 text-center text-sm transition-all hover:bg-foreground active:bg-lineBackground disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none',
        className,
      )}
      type="button"
      {...buttonProps}
    >
      {children}
    </button>
  );
}
export function Incrementor({
  onChange,
  value,
  min = -Infinity,
  max = Infinity,
  className,
  incrementLabel = 'next page',
  decrementLabel = 'prev page',
  ...incrementorProps
}) {
  value = parseInt(value);
  value = isNaN(value) ? '' : value;
  return (
    <div className={cx('w-fit bg-background relative flex  items-center"> rounded-md', className)}>
      <Textbox
        min={min}
        max={max}
        onChange={(v) => {
          if (v.length && v < min) {
            return;
          }
          onChange(v);
        }}
        type="number"
        placeholder=""
        value={value}
        className="w-32 mb-0 mt-0 border-none rounded-r-none bg-transparent appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
        {...incrementorProps}
      />
      <div className="flex gap-1 ">
        <IncButton disabled={value <= min} onClick={() => onChange(value - 1)} aria-label={decrementLabel}>
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
            <path d="M3.75 7.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5h-8.5Z" />
          </svg>
        </IncButton>
        <IncButton
          className="rounded-r-md"
          disabled={value >= max}
          onClick={() => onChange(value + 1)}
          aria-label={incrementLabel}
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" className="w-4 h-4">
            <path d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z" />
          </svg>
        </IncButton>
      </div>
    </div>
  );
}