'use client';
import { useState, useEffect } from 'react';
import { Component } from '@/components/ui/gallery-section';
const DemoOne = () => {
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
const projects = [
{
name: "Project 4",
backgroundImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-4_e62cd25fd3d241ccb7daaf4828ae75b1?$media-collection-half-dt-jpg$",
vignetteImage: "https://i1.adis.ws/i/canon/get-inspired-long-exposure-black-white-stephen-mcnally-1-16x9_62a5193931b64b6ca604d69fea93ba49?$hero-header-half-16by9-dt-jpg"
},
{
name: "Project 1",
backgroundImage: "https://cdn.21st.dev/assets/mirror/a2/a29ac52372861a16d38da755d4d5ca737752dda81dddf84696795e4fd72307dd.jpg",
vignetteImage: "https://cdn.21st.dev/assets/mirror/de/dee552b683e9531111859411b4e9456c64891d871115752fe18f6849818c0d9c.jpg"
},
{
name: "Project 2",
backgroundImage: "https://cdn.21st.dev/assets/mirror/03/0391d967b693745dc1390b6a41037af211380468c02603a837f01cb45c8a22d5.jpg",
vignetteImage: "https://cdn.21st.dev/assets/mirror/f0/f0cd5f2d609b3e850beda424daf044d493c518c8687e69492dbc5ad29b44d529.jpg"
},
{
name: "Project 3",
backgroundImage: "https://cdn.21st.dev/assets/mirror/44/4482f2e72c8527790d2966e72d6762589e4b1feb188db7fb62fbd4b126f0f74c.jpg",
vignetteImage: "https://cdn.21st.dev/assets/mirror/ef/ef7da58ae90ad102c9acee037fedd92cd22e89cc7786f11fec41be1625b112e1.jpg"
}
];
useEffect(() => {
const handleMouseMove = (e) => {
setMousePosition({ x: e.clientX, y: e.clientY });
};
window.addEventListener('mousemove', handleMouseMove);
return () => {
window.removeEventListener('mousemove', handleMouseMove);
};
}, []);
return (
<div style={{ height: '100vh', width: '100%', overflow: 'auto' }}>
<Component mousePosition={mousePosition} projects={projects} />
</div>
);
};
export { DemoOne };
