hide controls

src/components/ui-controls.tsx

@@ -1,12 +1,14 @@
 'use client';
 
 import { Button, ButtonGroup, Card, CardBody, Slider } from '@heroui/react';
+import { useState } from 'react';
 
 import { useControlContext } from '@/contexts/control-context';
 
 import { Actions } from './consts';
 
 export const UIControls = () => {
+  const [isControlsOpen, setIsControlsOpen] = useState(true);
   const { rubiksCubeRef, setBackground, cubeRoughness, setCubeRoughness, cubeSpeed, setCubeSpeed } =
     useControlContext();
 
@@ -30,46 +32,60 @@ export const UIControls = () => {
   return (
     <div className="z-10 pointer-events-none">
       <Card className="max-w-sm bg-white/30 border border-white/80 backdrop-blur-xl pointer-events-auto">
-        <CardBody className="flex flex-col gap-6">
-          <div className="text-2xl font-bold">Controls</div>
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center justify-between">
-              <div className="text-sm">Background</div>
-              <ButtonGroup size="sm">
-                <Button onPress={() => setBackground('sunset')}>Sunset</Button>
-                <Button onPress={() => setBackground('dawn')}>Dawn</Button>
-                <Button onPress={() => setBackground('forest')}>Forest</Button>
-              </ButtonGroup>
-            </div>
-            <Slider
-              size="sm"
-              label="Cube Roughness"
-              value={cubeRoughness}
-              onChange={(value) => setCubeRoughness(value as number)}
-              minValue={0.2}
-              maxValue={1}
-              step={0.01}
-            />
-            <Slider
-              size="sm"
-              label="Cube Speed"
-              value={cubeSpeed}
-              onChange={(value) => setCubeSpeed(value as number)}
-              minValue={1}
-              maxValue={10}
-              step={1}
-            />
+        <CardBody className="flex flex-col">
+          <div className="flex justify-between items-center">
+            <div className="text-2xl font-bold">Controls</div>
+            <Button variant="light" size="sm" onPress={() => setIsControlsOpen(!isControlsOpen)}>
+              {isControlsOpen ? 'Hide' : 'Show'}
+            </Button>
           </div>
-          <div className="flex flex-col gap-2">
-            <div className="flex gap-2">
-              <Button onPress={scramble}>Scramble</Button>
-              <Button onPress={reset}>Reset</Button>
-              <Button className="ms-auto" color="success" onPress={solve}>
-                Solve
-              </Button>
+          <div
+            className={`
+              flex flex-col gap-6 transition-all duration-500 ease-in-out
+              ${isControlsOpen ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0 pointer-events-none'}
+              overflow-hidden
+            `}
+            style={{ willChange: 'max-height, opacity' }}
+          >
+            <div className="flex flex-col gap-2 mt-6">
+              <div className="flex items-center justify-between">
+                <div className="text-sm">Background</div>
+                <ButtonGroup size="sm">
+                  <Button onPress={() => setBackground('sunset')}>Sunset</Button>
+                  <Button onPress={() => setBackground('dawn')}>Dawn</Button>
+                  <Button onPress={() => setBackground('forest')}>Forest</Button>
+                </ButtonGroup>
+              </div>
+              <Slider
+                size="sm"
+                label="Cube Roughness"
+                value={cubeRoughness}
+                onChange={(value) => setCubeRoughness(value as number)}
+                minValue={0.2}
+                maxValue={1}
+                step={0.01}
+              />
+              <Slider
+                size="sm"
+                label="Cube Speed"
+                value={cubeSpeed}
+                onChange={(value) => setCubeSpeed(value as number)}
+                minValue={1}
+                maxValue={10}
+                step={1}
+              />
             </div>
-            <div className="text-sm italic font-bold underline text-primary cursor-pointer" onClick={train}>
-              Train my own model!
+            <div className="flex flex-col gap-2">
+              <div className="flex gap-2">
+                <Button onPress={scramble}>Scramble</Button>
+                <Button onPress={reset}>Reset</Button>
+                <Button className="ms-auto" color="success" onPress={solve}>
+                  Solve
+                </Button>
+              </div>
+              <div className="text-sm italic font-bold underline text-primary cursor-pointer" onClick={train}>
+                Train my own model!
+              </div>
             </div>
           </div>
         </CardBody>