refactor: Création de composants et uniformisation des modales (#2)

Front-End/src/components/ToggleSwitch.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const ToggleSwitch = ({ label, checked, onChange }) => {
+    return (
+        <div className="flex items-center mt-4">
+            <label className="mr-2 text-gray-600">{label}</label>
+            <div className="relative inline-block w-10 mr-2 align-middle select-none transition duration-200 ease-in">
+                <input 
+                    type="checkbox" 
+                    name="toggle" 
+                    id="toggle" 
+                    checked={checked}
+                    onChange={onChange}
+                    className="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer border-emerald-500 checked:right-0 checked:border-emerald-500 checked:bg-emerald-500 focus:border-emerald-500 focus:bg-emerald-500 hover:border-emerald-500 hover:bg-emerald-500"
+                />
+                <label 
+                    htmlFor="toggle" 
+                    className={`toggle-label block overflow-hidden h-6 rounded-full cursor-pointer transition-colors duration-200 ${checked ? 'bg-emerald-300' : 'bg-gray-300'}`}
+                ></label>
+            </div>
+        </div>
+    );
+};
+
+export default ToggleSwitch;