✨ used framer-motion layout to simplify toggle component (SyntaxUI#145)

* ✨ used framer-motion layout to simplify sisimple toggle component

* ✨ add color transition and toggle size change on toggled state

src/showcase/components/toggle/SimpleToggle.tsx

@@ -18,26 +18,23 @@ const SimpleToggle = ({
   }
 
   return (
-    <button
-      className={`h-[25px] w-[45px] cursor-pointer rounded-full ${
-        toggled ? 'bg-red-500' : 'bg-gray-700/50'
-      }`}
+    <motion.button
+      className={`flex h-[25px] w-[45px] cursor-pointer items-center rounded-full p-[2px]`}
       onClick={handleToggle}
+      animate={{ backgroundColor: toggled ? '#fb3a5d' : '#24252d50' }}
+      transition={{ duration: 0.2 }}
     >
       <motion.span
-        className="inline-block aspect-square h-full transform rounded-full bg-white shadow-lg"
-        variants={{
-          animate: {
-            x: toggled ? 10 : -10,
-            opacity: toggled ? 1 : 0.8,
-            scale: toggled ? 0.7 : 0.6,
-          },
+        className="rounded-full bg-white shadow-lg"
+        layout
+        transition={{ duration: 0.2 }}
+        style={{
+          width: toggled ? '19px' : '16px',
+          height: toggled ? '19px' : '16px',
+          marginLeft: toggled ? '20px' : '2px',
         }}
-        initial="animate"
-        animate="animate"
-        transition={{ type: 'spring', stiffness: 500, damping: 30 }}
       />
-    </button>
+    </motion.button>
   )
 }