Axis

// DemoOne.tsx
import React, { useState, useEffect, useMemo } from 'react';
import { Component, backgroundColor } from '@/components/ui/axis';
import { cn } from '@/lib/utils';

type AnimationTrajectory = 'outside' | 'center' | 'min' | 'max' | undefined;

const DemoOne = () => {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateDimensions = () => {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    updateDimensions();
    window.addEventListener('resize', updateDimensions);
    return () => window.removeEventListener('resize', updateDimensions);
  }, []);


  const [useAnimatedComponents, setUseAnimatedComponents] = useState(true); // 
  const [dataToggle, setDataToggle] = useState(true);
  const [animationTrajectory, setAnimationTrajectory] = useState<AnimationTrajectory>('center');

  const outerWidth = dimensions.width;
  const outerHeight = dimensions.height;

  if (outerWidth === 0 || outerHeight === 0) {
    return (
      <div className={cn("flex w-screen h-screen justify-center items-center bg-gray-900 text-white")}>
        Загрузка...
      </div>
    );
  }

  return (
    <div className={cn("w-screen h-screen overflow-hidden flex justify-center items-center")} style={{ backgroundColor: backgroundColor }}>
      <Component
        width={outerWidth}
        height={outerHeight}
        showControls={true}
        dataToggle={dataToggle}
        animationTrajectory={animationTrajectory}
        useAnimatedComponents={useAnimatedComponents}
      />

      <div style={{ position: 'absolute', top: '10px', left: '10px', color: 'white', zIndex: 10 }}>
        <div style={{ fontSize: 12 }}>
          <label>
            <input
              type="checkbox"
              checked={useAnimatedComponents}
              onChange={() => { }} 
              disabled={true} 
            />{' '}
            enable animation
          </label>
             
          {useAnimatedComponents && ( 
            <>
              <strong>animation trajectory</strong>
              <label>
                <input
                  type="radio"
                  value="outside"
                  checked={animationTrajectory === 'outside'}
                  onChange={() => setAnimationTrajectory('outside')}
                />{' '}
                outside
              </label>
              <label>
                <input
                  type="radio"
                  value="center"
                  checked={animationTrajectory === 'center'}
                  onChange={() => setAnimationTrajectory('center')}
                />{' '}
                center
              </label>
              <label>
                <input
                  type="radio"
                  value="min"
                  checked={animationTrajectory === 'min'}
                  onChange={() => setAnimationTrajectory('min')}
                />{' '}
                min
              </label>
              <label>
                <input
                  type="radio"
                  value="max"
                  checked={animationTrajectory === 'max'}
                  onChange={() => setAnimationTrajectory('max')}
                />{' '}
                max
              </label>
            </>
          )}
        </div>
        {useAnimatedComponents && (
          <button onClick={() => setDataToggle(!dataToggle)} style={{ background: '#340098', color: 'white', border: 'none', padding: '5px 10px', borderRadius: '5px', cursor: 'pointer' }}>Update scales</button>
        )}
      </div>
    </div>
  );
};

export { DemoOne };