function MainComponent() { const [shape, setShape] = React.useState('cube'); const handleChange = (event)=>{ setShape(event.target.value); }; const renderShape = (shape)=>{ switch(shape){ case 'cube': return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] mx-auto my-8 perspective", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute shape-cube animate-rotate", __source: { fileName: "", lineNumber: 13, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shape-face front", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face back", __source: { fileName: "", lineNumber: 15, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face right", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face left", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face top", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face bottom", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }))); case 'sphere': return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] rounded-full mx-auto my-8 bg-[#6495ed] animate-rotate", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }); case 'pyramid': return /*#__PURE__*/ React.createElement("div", { className: "w-[300px] h-[300px] mx-auto my-8 perspective", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute shape-pyramid animate-rotate", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "shape-face front", __source: { fileName: "", lineNumber: 31, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face back", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face right", __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face left", __source: { fileName: "", lineNumber: 34, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "shape-face bottom", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-[#f0f0f0] p-4 font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "shape", className: "p-2 mb-4 text-sm rounded-md bg-white border border-gray-300", onChange: handleChange, value: shape, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "cube", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, "Cube"), /*#__PURE__*/ React.createElement("option", { value: "sphere", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "Sphere"), /*#__PURE__*/ React.createElement("option", { value: "pyramid", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, "Pyramid")), renderShape(shape), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, ` .perspective { perspective: 600px; } .animate-rotate { animation: rotate-cube 10s linear infinite; } @keyframes rotate-cube { 0% { transform: rotateX(0deg) rotateY(0deg); } 50% { transform: rotateX(-180deg) rotateY(-180deg); } 100% { transform: rotateX(-360deg) rotateY(-360deg); } } .shape-cube, .shape-pyramid { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; } .shape-face { position: absolute; width: 100%; height: 100%; background: #ff6347; border: 2px solid #fff; } .shape-cube .front { transform: translateZ(150px); } .shape-cube .back { transform: rotateY(180deg) translateZ(150px); } .shape-cube .right { transform: rotateY(90deg) translateZ(150px); } .shape-cube .left { transform: rotateY(-90deg) translateZ(150px); } .shape-cube .top { transform: rotateX(90deg) translateZ(150px); } .shape-cube .bottom { transform: rotateX(-90deg) translateZ(150px); } .shape-pyramid .front { transform: rotateY(0) translateX(0) translateY(0) rotateZ(0); } .shape-pyramid .back { transform: rotateY(180deg) translateX(150px) translateY(-150px) rotateZ(45deg); } .shape-pyramid .right { transform: rotateX(-141.42deg) rotateY(90deg) translateZ(150px); } .shape-pyramid .left { transform: rotateX(-141.42deg) rotateY(-90deg) translateZ(150px); } .shape-pyramid .bottom { transform: translateZ(-150px) rotateY(0deg); } `)); }