95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useRef, useEffect } from 'react';
|
|
import Image from 'next/image';
|
|
import { useIsMobile } from '@/hooks/use-mobile';
|
|
|
|
export default function DraggableWindow() {
|
|
const isMobile = useIsMobile();
|
|
const [isVisible, setIsVisible] = useState(true);
|
|
const [position, setPosition] = useState({ x: 100, y: 100 });
|
|
const [isDragging, setIsDragging] = useState(false);
|
|
const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
|
|
const windowRef = useRef<HTMLDivElement>(null);
|
|
|
|
const handleMouseDown = (e: React.MouseEvent) => {
|
|
setIsDragging(true);
|
|
if (windowRef.current) {
|
|
const rect = windowRef.current.getBoundingClientRect();
|
|
setDragOffset({
|
|
x: e.clientX - rect.left,
|
|
y: e.clientY - rect.top,
|
|
});
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
if (!isDragging) return;
|
|
|
|
setPosition({
|
|
x: e.clientX - dragOffset.x,
|
|
y: e.clientY - dragOffset.y,
|
|
});
|
|
};
|
|
|
|
const handleMouseUp = () => {
|
|
setIsDragging(false);
|
|
};
|
|
|
|
if (isDragging) {
|
|
document.addEventListener('mousemove', handleMouseMove);
|
|
document.addEventListener('mouseup', handleMouseUp);
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('mousemove', handleMouseMove);
|
|
document.removeEventListener('mouseup', handleMouseUp);
|
|
};
|
|
}, [isDragging, dragOffset]);
|
|
|
|
return (
|
|
isMobile ? (
|
|
<figure className="mb-8 w-full h-auto">
|
|
<picture className="block bg-gray-100 rounded-xl aspect-3-2 overflow-hidden image-scale object-shadowed">
|
|
<Image
|
|
src="/full.webp"
|
|
alt="Banner"
|
|
width={1200}
|
|
height={400}
|
|
priority
|
|
className="object-cover object-center transition-transform duration-300 hover:scale-105"
|
|
/>
|
|
</picture>
|
|
</figure >
|
|
) : (
|
|
isVisible && (
|
|
<div
|
|
ref={windowRef}
|
|
className="fixed cursor-move select-none"
|
|
style={{
|
|
left: `${position.x}px`,
|
|
top: `${position.y}px`,
|
|
}}
|
|
onMouseDown={handleMouseDown}
|
|
>
|
|
<div className="relative w-fit h-fit">
|
|
<Image
|
|
src="/window.png"
|
|
alt="Draggable Window"
|
|
width={500}
|
|
height={400}
|
|
priority
|
|
draggable={false}
|
|
/>
|
|
<button
|
|
onClick={() => setIsVisible(false)}
|
|
className="absolute top-1 right-2 w-5 h-5 cursor-pointer"
|
|
aria-label="Close window"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
)
|
|
);
|
|
}
|