function MainComponent() { const [zoom, setZoom] = React.useState(1); const [pinPosition, setPinPosition] = React.useState(null); const [location, setLocation] = React.useState(''); const [pins, setPins] = React.useState([]); React.useEffect(()=>{ const script = document.createElement('script'); script.src = 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js'; script.onload = initGlobe; document.body.appendChild(script); }, []); const initGlobe = ()=>{ const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById('globe-container').appendChild(renderer.domElement); const geometry = new THREE.SphereGeometry(5, 50, 50); const material = new THREE.MeshBasicMaterial({ color: 0x0033ff, wireframe: true }); const earth = new THREE.Mesh(geometry, material); scene.add(earth); camera.position.z = 15; const animate = function() { requestAnimationFrame(animate); earth.rotation.y += 0.001; renderer.render(scene, camera); }; animate(); window.onwheel = (e)=>{ if (e.deltaY > 0) { setZoom((prevZoom)=>Math.min(prevZoom + 0.1, 2)); } else { setZoom((prevZoom)=>Math.max(prevZoom - 0.1, 0.5)); } camera.position.z = 15 / zoom; }; }; const handleZoomIn = ()=>setZoom((prevZoom)=>Math.min(prevZoom + 0.1, 2)); const handleZoomOut = ()=>setZoom((prevZoom)=>Math.max(prevZoom - 0.1, 0.5)); const handleReset = ()=>{ setZoom(1); setPins([]); }; const handleLocationChange = (e)=>setLocation(e.target.value); const handleLocationSubmit = async ()=>{ const response = await fetch(`/integrations/google-search/search?q=${location}`, { method: 'GET' }); const data = await response.json(); const pin = { position: pinPosition, info: data.items[0] }; setPins((prevPins)=>[ ...prevPins, pin ]); }; const handlePinClick = (pin)=>{ alert(pin.info.title); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-full bg-cover bg-center", style: { backgroundImage: 'url(/path/to/star-background.jpg)' }, __source: { fileName: "", lineNumber: 70, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { id: "globe-container", className: "w-full h-[80vh] mx-auto mt-20", __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-5 left-1/2 transform -translate-x-1/2 flex space-x-3", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleZoomIn, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, "Zoom In"), /*#__PURE__*/ React.createElement("button", { onClick: handleZoomOut, className: "bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, "Zoom Out")), /*#__PURE__*/ React.createElement("input", { type: "text", name: "location", value: location, onChange: handleLocationChange, className: "absolute top-5 right-5 p-2 border rounded", placeholder: "Enter location", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleLocationSubmit, className: "absolute top-5 right-52 bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, "Pin Location"), /*#__PURE__*/ React.createElement("button", { onClick: handleReset, className: "absolute top-5 left-5 bg-red-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 85, columnNumber: 7 }, __self: this }, "Reset")); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full", __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); }