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:
parent
83017a3341
commit
82b5b0719c
6 changed files with 182 additions and 2 deletions
22
src/components/txt.tsx
Normal file
22
src/components/txt.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import Image from "next/image";
|
||||
|
||||
interface TXTProps {
|
||||
onHover?: (position: { x: number; y: number } | null) => void;
|
||||
}
|
||||
|
||||
export default function TXT({ onHover }: TXTProps) {
|
||||
return (
|
||||
<div
|
||||
className="flex flex-col items-center justify-center gap-4 absolute top-4 left-4 p-2 cursor-pointer font-galmuri drag-none select-none"
|
||||
onMouseEnter={() => onHover?.({ x: 16, y: 16 })}
|
||||
onMouseLeave={() => onHover?.(null)}
|
||||
onClick={() => {
|
||||
alert("왜 편법을 쓰지?");
|
||||
window.location.reload();
|
||||
}}
|
||||
>
|
||||
<Image src="/txt.webp" alt="txt" width={24} height={24} />
|
||||
<span className="text-sm font-medium text-foreground/80 font-galmuri">비밀.txt</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue