From 9d7c2b2109fd10b45b6954993168e1b4cb543aa2 Mon Sep 17 00:00:00 2001
From: yousifpa98 <yousif.paulus@dci-student.org>
Date: Sat, 21 Dec 2024 12:16:24 +0100
Subject: [PATCH] toggle styled but no functionality

---
 src/components/Home.jsx                 |  6 ++---
 src/components/LangSelect.jsx           | 17 +++++++++---
 src/components/Switch.jsx               |  8 ++----
 src/components/mainViews/About.jsx      |  4 +--
 src/components/subComponents/Toggle.jsx | 16 +++++++++++
 src/css/LangSelect.css                  |  9 +++++++
 src/css/Switch.css                      | 35 ++++++++++++++++++++++++
 src/css/Toggle.css                      | 36 +++++++++++++++++++++++++
 8 files changed, 116 insertions(+), 15 deletions(-)
 create mode 100644 src/components/subComponents/Toggle.jsx
 create mode 100644 src/css/Toggle.css

diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 7829696..83d55a1 100644
--- a/src/components/Home.jsx
+++ b/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}
         />
       )}
diff --git a/src/components/LangSelect.jsx b/src/components/LangSelect.jsx
index 4be08cf..d331def 100644
--- a/src/components/LangSelect.jsx
+++ b/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;
diff --git a/src/components/Switch.jsx b/src/components/Switch.jsx
index 3cb78f4..e53dcb5 100644
--- a/src/components/Switch.jsx
+++ b/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>
   );
 };
diff --git a/src/components/mainViews/About.jsx b/src/components/mainViews/About.jsx
index cd09512..ac8d6bf 100644
--- a/src/components/mainViews/About.jsx
+++ b/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} */
       />
diff --git a/src/components/subComponents/Toggle.jsx b/src/components/subComponents/Toggle.jsx
new file mode 100644
index 0000000..c984112
--- /dev/null
+++ b/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;
diff --git a/src/css/LangSelect.css b/src/css/LangSelect.css
index 670e0d5..0d9ffb0 100644
--- a/src/css/LangSelect.css
+++ b/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;
 }
diff --git a/src/css/Switch.css b/src/css/Switch.css
index b0459bc..91f357a 100644
--- a/src/css/Switch.css
+++ b/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);
+}
diff --git a/src/css/Toggle.css b/src/css/Toggle.css
new file mode 100644
index 0000000..95ab60c
--- /dev/null
+++ b/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);
+}