Components
Loading preview...
Curves component
npx shadcn@latest add https://21st.dev/r/airbnb/curves// DemoOne.tsx
import React, { useState, useEffect } from "react";
import { Component } from "@/components/ui/curves";
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 showControls = true;
const controlledHeight = showControls ? chartHeight - 40 : chartHeight;
return (
<div className={cn("w-screen h-screen overflow-hidden bg-gray-800 flex justify-center items-center")}>
<Component
width={chartWidth * 0.9}
height={controlledHeight * 0.9}
showControls={showControls}
/>
</div>
);
};
export { DemoOne };