Components
Loading preview...
Here is radial lines animated components
npx shadcn@latest add https://21st.dev/r/airbnb/radial-lines// DemoOne.tsx
import React, { useState, useEffect } from 'react';
import { Component, background } from '@/components/ui/radial-lines';
import { cn } from '@/lib/utils';
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 chartWidth = dimensions.width;
const chartHeight = dimensions.height;
if (chartWidth === 0 || chartHeight === 0) {
return (
<div className={cn("flex w-screen h-screen justify-center items-center bg-gray-900 text-white")}>
Загрузка...
</div>
);
}
const animateByDefault = true;
return (
<div className={cn("w-screen h-screen overflow-hidden flex justify-center items-center")} style={{ backgroundColor: background }}>
<Component
width={chartWidth}
height={chartHeight}
animate={animateByDefault}
/>
</div>
);
};
export { DemoOne };