Components
Loading preview...
Animated axis
npx shadcn@latest add https://21st.dev/r/airbnb/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 };