added animation upon closing

Author: si-mooon

src/components/LevelComponent.tsx

@@ -1,37 +1,57 @@
-import React, { useState, useEffect, useRef } from 'react'
+import React, { useState } from 'react'
 import OutputComponent from './OutputComponent'
 import InfoComponent from './InfoComponent'
 
-export default function LevelComponent() {
+export default function LevelComponent({ onClose }: { onClose: () => void }) {
+  const [isClosing, setIsClosing] = useState(false);
 
-  return (
-    <div className="animate-[zoomIn_0.3s_ease-out_forwards] origin-center w-screen h-screen flex gap-10 p-4 font-mono overflow-hidden">
-      <div className="flex gap-4 p-4 w-6/7 mx-auto">
+  const handleClose = () => setIsClosing(true);
 
-        <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
-          <InfoComponent />
-        </div>
-        <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
-          <OutputComponent />
-        </div>
+  const handleAnimationEnd = () => {
+    if (isClosing) onClose();
+  };
 
-      </div>
-          
+  return (
+    <>
       <style>{`
-        @keyframes zoomIn {
+        @keyframes expandDown {
           from { transform: scaleY(0); }
           to   { transform: scaleY(1); }
         }
-        .zoom-in {
-          animation: zoomIn 0.3s ease-out forwards;
+        @keyframes collapseUp {
+          from { transform: scaleY(1); }
+          to   { transform: scaleY(0); }
+        }
+        .expand-down {
+          animation: expandDown 0.2s ease-out forwards;
+          transform-origin: center;
+        }
+        .collapse-up {
+          animation: collapseUp 0.2s ease-in forwards;
           transform-origin: center;
         }
       `}</style>
-      <div className="zoom-in">
-        {/* your content */}
-      </div>
-    
+      <div
+        className={`${isClosing ? 'collapse-up' : 'expand-down'} w-screen h-screen flex gap-10 p-4 font-mono overflow-hidden`}
+        onAnimationEnd={handleAnimationEnd}
+      >
+        {/* X button */}
+        <button
+          onClick={handleClose}
+          className="absolute top-9 right-38 text-white text-xl leading-none"
+        >
+          ✕
+        </button>
 
-    </div>
-  )
+        <div className="flex gap-4 p-4 w-6/7 mx-auto">
+          <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
+            <InfoComponent />
+          </div>
+          <div className="flex-1 bg-[#2a2a2a] rounded-2xl p-3 flex flex-col gap-3">
+            <OutputComponent />
+          </div>
+        </div>
+      </div>
+    </>
+  );
 }

src/pages/home/Home.tsx

@@ -8,18 +8,23 @@ export default function Home() {
   const [isVisible, setIsVisible] = useState(false);
   const [mountKey, setMountKey] = useState(0);
 
-  const handleToggle = () => {
-    if (!isVisible) setMountKey(k => k + 1);
-    setIsVisible(v => !v);
+  const handleOpen = () => {
+    setMountKey(k => k + 1);
+    setIsVisible(true);
   };
 
   return (
     <div>
-      <button onClick={handleToggle}>
-        {isVisible ? 'Hide' : 'Show'} Component
+      <button className="ml-100 mt-80 absolute border-4 rounded-3xl p-5" onClick={handleOpen} disabled={isVisible}>
+        Glorp
       </button>
 
-      {isVisible && <LevelComponent key={mountKey} />}
+      {isVisible && (
+        <LevelComponent
+          key={mountKey}
+          onClose={() => setIsVisible(false)}
+        />
+      )}
     </div>
   );
 }