function MainComponent() { const [rotation, setRotation] = React.useState({ x: -20, y: 30 }); const [isDragging, setIsDragging] = React.useState(false); const [lastPosition, setLastPosition] = React.useState({ x: 0, y: 0 }); const prismRef = React.useRef(null); const handleStartDrag = (clientX, clientY)=>{ setIsDragging(true); setLastPosition({ x: clientX, y: clientY }); }; const handleDrag = (clientX, clientY)=>{ if (!isDragging) return; const deltaX = clientX - lastPosition.x; const deltaY = clientY - lastPosition.y; const rotationSpeed = 0.02; setRotation((prev)=>({ x: Math.max(-20, Math.min(20, prev.x + deltaY * rotationSpeed)), y: prev.y - deltaX * rotationSpeed })); setLastPosition({ x: clientX, y: clientY }); }; const handleEndDrag = ()=>{ setIsDragging(false); }; React.useEffect(()=>{ const prism = prismRef.current; if (!prism) return; const handleMouseDown = (e)=>handleStartDrag(e.clientX, e.clientY); const handleMouseMove = (e)=>handleDrag(e.clientX, e.clientY); const handleMouseUp = handleEndDrag; const handleTouchStart = (e)=>handleStartDrag(e.touches[0].clientX, e.touches[0].clientY); const handleTouchMove = (e)=>{ e.preventDefault(); handleDrag(e.touches[0].clientX, e.touches[0].clientY); }; const handleTouchEnd = handleEndDrag; prism.addEventListener("mousedown", handleMouseDown); window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mouseup", handleMouseUp); prism.addEventListener("touchstart", handleTouchStart); window.addEventListener("touchmove", handleTouchMove, { passive: false }); window.addEventListener("touchend", handleTouchEnd); return ()=>{ prism.removeEventListener("mousedown", handleMouseDown); window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mouseup", handleMouseUp); prism.removeEventListener("touchstart", handleTouchStart); window.removeEventListener("touchmove", handleTouchMove); window.removeEventListener("touchend", handleTouchEnd); }; }, [ isDragging ]); const sides = 6; const angle = 360 / sides; const radius = 200; const sideContent = [ { image: "https://ucarecdn.com/76efef0a-df00-4408-8bc8-a738af594041/-/format/auto/", text: "X", link: "https://x.com/el_el_san" }, { image: "https://ucarecdn.com/23b32c5b-76c6-452c-91d0-af6e8f45d09f/-/format/auto/", text: "Threads", link: "https://www.threads.net/@el_el_san" }, { image: "https://ucarecdn.com/5916ba9a-2919-4833-80ce-91d57ee0b808/-/format/auto/", text: "Note", link: "https://note.com/el_el_san/" }, { image: "https://ucarecdn.com/106aa9dc-6fe5-4237-b129-83ebe377b506/-/format/auto/", text: "pixiv", link: "https://www.pixiv.net/" }, { image: "https://ucarecdn.com/fd308e9d-16b0-4047-9394-9df727421980/-/format/auto/", text: "hugging face", link: "https://huggingface.co/el-el-san" }, { image: "https://ucarecdn.com/300234f7-1822-42d1-93b4-3470e9e72b3f/-/format/auto/", text: "Youtube", link: "https://www.youtube.com/@el_el_san" } ]; const backgroundImageUrl = "https://ucarecdn.com/e1fc09e8-2a55-4786-aae5-5e2fea84f0ae/-/format/auto/"; return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center w-full h-screen bg-cover bg-center relative", style: { backgroundImage: `url(${backgroundImageUrl})` }, __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-white opacity-50", __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "perspective-[2000px] w-[500px] h-[500px] flex justify-center items-center relative z-10", __source: { fileName: "", lineNumber: 105, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { ref: prismRef, className: `w-[150px] h-[300px] relative transform-style-3d cursor-${isDragging ? "grabbing" : "grab"}`, style: { transform: `rotateX(${rotation.x}deg) rotateY(${rotation.y}deg)`, transition: isDragging ? "none" : "transform 0.3s ease-out" }, __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }, sideContent.map((content, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute w-[150px] h-[300px] bg-white/80 border border-black flex flex-col justify-between items-center text-2xl overflow-hidden", style: { transform: `rotateY(${index * angle}deg) translateZ(${radius}px) translateX(-50%)` }, __source: { fileName: "", lineNumber: 117, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: content.image, alt: `${content.text} image for 3D prism face`, className: "w-full h-[150px] object-cover", __source: { fileName: "", lineNumber: 126, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("a", { href: content.link, target: "_blank", rel: "noopener noreferrer", className: "flex justify-center items-center w-full h-[150px] no-underline text-black bg-white/80", __source: { fileName: "", lineNumber: 131, columnNumber: 15 }, __self: this }, content.text))), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[280px] h-[280px] bg-white/80 border border-black flex justify-center items-center text-2xl", style: { transform: `rotateX(90deg) translateZ(150px) translateX(-50%)` }, __source: { fileName: "", lineNumber: 141, columnNumber: 11 }, __self: this }, "えるのWorkSpace"), /*#__PURE__*/ React.createElement("div", { className: "absolute w-[280px] h-[280px] bg-white/80 border border-black flex justify-center items-center text-2xl", style: { transform: `rotateX(-90deg) translateZ(150px) translateX(-50%)` }, __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "えるの部屋"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 159, columnNumber: 7 }, __self: this }, ` .transform-style-3d { transform-style: preserve-3d; } `)); }