feat: Add draggable window component and associated functionality

- Implemented DraggableWindose component with drag-and-drop capabilities.
- Added shake detection to close the window after multiple shakes.
- Integrated responsive design for mobile devices.
- Created TXT component to display a clickable text icon with hover effects.
- Included image assets for the draggable window and text icon.
This commit is contained in:
암냥 2025-12-20 01:13:28 +09:00
commit 82b5b0719c
No known key found for this signature in database
6 changed files with 182 additions and 2 deletions

View file

@ -10,13 +10,24 @@ import { Banner } from "@/components/ui/banner";
import { LinkIcon, TreeDeciduous, TreePalmIcon, TreesIcon } from "lucide-react";
import { useState } from "react";
import Contact from "@/components/Contact";
import DraggableWindose from "@/components/DraggableWindose";
import TXT from "@/components/txt";
export default function Page() {
const { theme } = useTheme();
const [show, setShow] = useState(true);
const [targetPosition, setTargetPosition] = useState<{ x: number; y: number } | null>(null);
const [windowVisible, setWindowVisible] = useState(true);
const handleTXTHover = (position: { x: number; y: number } | null) => {
setTargetPosition(position);
if (position) {
setWindowVisible(true);
}
};
return (
<main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory">
<main className="min-h-screen w-screen overflow-y-scroll snap-y snap-mandatory relative">
<Snowfall color={theme === 'dark' ? '#ffffff' : '#bcbcd6ff'} />
<div className="max-w-3xl w-full flex flex-row h-auto mx-auto gap-4 items-center my-8 lg:px-0 px-8">
@ -54,7 +65,8 @@ export default function Page() {
/>
</div>
<DraggableWindow />
<DraggableWindose targetPosition={targetPosition} isVisible={windowVisible} onClose={() => setWindowVisible(false)} onDragStart={() => setTargetPosition(null)} />
<TXT onHover={handleTXTHover} />
<div className="max-w-3xl w-full">
<p> <strong></strong> <strong></strong> <strong>, </strong> .</p>
<p><strong> </strong> , .</p>