Components
Loading preview...
Here is Hover Zoom component
@JurreHoutkamp
npx shadcn@latest add https://21st.dev/r/JurreHoutkamp/hover-zoom// --- Demo/Wrapper Component ---
// Это универсальный демонстрационный компонент. Он не зависит от Framer
// и может быть отрендерен в любом React-приложении (Vite, Storybook и т.д.).
import { jsx as _jsx } from "react/jsx-runtime";
// Предполагается, что чистый компонент лежит в соседнем файле.
// Адаптируйте путь импорта под вашу структуру проекта.
import { ZoomImageUI } from "@/components/ui/hover-zoom";
/**
* ZoomImageDemo - это "умная" обертка, которая показывает, как
* использовать ZoomImageUI. Она задает окружение (размеры, центрирование)
* и передает конкретные props для демонстрации.
*/
export default function ZoomImageDemo() {
// Враппер для демонстрации. Создаем контейнер, чтобы компонент
// было удобно просматривать.
const demoContainerStyles = {
display: "flex",
justifyContent: "center",
alignItems: "center",
width: "100%",
height: "100vh", // Занимает весь экран для наглядности
background: "#f0f0f0",
};
// Определяем конкретные props для одного экземпляра компонента.
// Это заменяет логику addPropertyControls.
const componentProps = {
zoomScale: 2,
borderRadius: 16,
backgroundColor: "#000",
image: {
src: "https://framerusercontent.com/images/70D908ZnP0cnDre3T7DlePO12M.jpeg",
alt: "Colorful abstract background",
},
// Задаем фиксированные размеры для демонстрационного компонента
style: {
width: "300px",
height: "300px",
boxShadow: "0 10px 30px rgba(0,0,0,0.2)",
}
};
return (
<div style={demoContainerStyles}>
<ZoomImageUI {...componentProps} />
</div>
);
}