toggle styled but no functionality

src/components/Home.jsx

@@ -49,7 +49,7 @@ const Home = () => {
       ) : (
         <LangSelect
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}
@@ -58,7 +58,7 @@ const Home = () => {
       ) : (
         <Mail
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}
@@ -67,7 +67,7 @@ const Home = () => {
       ) : (
         <Switch
           initialAnimation="animate__zoomIn"
-         /*  onMouseEnter={handleMouseEnter} */
+          /*  onMouseEnter={handleMouseEnter} */
           onAnimationEnd={handleAnimationEnd}
         />
       )}

src/components/LangSelect.jsx

@@ -1,12 +1,21 @@
 import React from "react";
 import "../css/LangSelect.css";
 import { useState } from "react";
+import Toggle from "./subComponents/Toggle";
 
 const LangSelect = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
-    const [animation, setAnimation] = useState(initialAnimation);
-    return <div className={`langSelect container animate__animated ${animation}`}
-    onMouseEnter={() => onMouseEnter(setAnimation)}
-    onAnimationEnd={() => onAnimationEnd(setAnimation)}>LangSelect</div>;
+  const [animation, setAnimation] = useState(initialAnimation);
+  return (
+    <div
+      className={`langSelect container animate__animated ${animation}`}
+      onMouseEnter={() => onMouseEnter(setAnimation)}
+      onAnimationEnd={() => onAnimationEnd(setAnimation)}
+    >
+      <div className="eng">🇬🇧</div>
+      <Toggle />
+      <div className="ger">🇩🇪</div>
+    </div>
+  );
 };
 
 export default LangSelect;

src/components/Switch.jsx

@@ -6,12 +6,8 @@ import "animate.css";
 const Switch = ({ initialAnimation, onMouseEnter, onAnimationEnd }) => {
   const [animation, setAnimation] = useState(initialAnimation);
   return (
-    <div
-      className={`switch container animate__animated ${animation}`}
-      onMouseEnter={() => onMouseEnter(setAnimation)}
-      onAnimationEnd={() => onAnimationEnd(setAnimation)}
-    >
-      Switch
+    <div className={`switch container animate__animated ${animation}`}>
+      switch
     </div>
   );
 };

src/components/mainViews/About.jsx

@@ -36,9 +36,9 @@ const About = () => {
       />
       <LangSelect />
       <Mail />
-      <Switch />
+      <Switch isOn={false} handleToggle={toggleSwitch} />
       <Navigation
-       /*  initialAnimation="animate__bounceInDown"
+      /*  initialAnimation="animate__bounceInDown"
         onMouseEnter={handleMouseEnter}
         onAnimationEnd={handleAnimationEnd} */
       />

src/components/subComponents/Toggle.jsx

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+import "../../css/Toggle.css";
+
+const Toggle = () => {
+  const [toggled, setToggled] = useState(false);
+  return (
+    <button
+      className={`toggle-btn ${toggled ? "toggled" : ""}`}
+      onClick={() => setToggled(!toggled)}
+    >
+      <div className="thumb"></div>
+    </button>
+  );
+};
+
+export default Toggle;

src/css/LangSelect.css

@@ -1,3 +1,12 @@
 .langSelect {
   grid-area: 8 / 1 / 9 / 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.eng,
+.ger {
+  font-size: 1.5rem;
 }

src/css/Switch.css

@@ -1,3 +1,38 @@
 .switch {
   grid-area: 8 / 4 / 10 / 5;
 }
+
+.switch-container {
+  display: inline-block;
+  position: relative;
+}
+
+.switch-checkbox {
+  display: none;
+}
+
+.switch-label {
+  display: block;
+  width: 50px;
+  height: 24px;
+  border-radius: 34px;
+  position: relative;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.switch-label .switch-button {
+  display: block;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border-radius: 50%;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.switch-checkbox:checked + .switch-label .switch-button {
+  transform: translateX(26px);
+}

src/css/Toggle.css

@@ -0,0 +1,36 @@
+.toggle-btn {
+  background-color: #b7b9ba;
+  border: 1px solid #aaa;
+  border-radius: 99px;
+  width: 50px;
+  height: 28px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, border-color 0.3s ease;
+  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.748);
+  position: relative;
+}
+
+.toggle-btn .thumb {
+  height: 20px;
+  width: 20px;
+  background-color: #fff;
+  border-radius: 99px;
+  transform: translateX(0);
+  transition: left 0.3s ease;
+  position: absolute;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.toggle-btn.toggled {
+  background-color: #15b58e;
+}
+
+.toggle-btn:hover {
+  border-color: #6f6f6f;
+}
+
+.toggle-btn.toggled .thumb {
+  left: calc(50px - 25px);
+}