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