Merge pull request #76 from Elizabethhub/dmytro-prymache-header-start…

…-page

Додаткові функції (зміна мови, темна світла тема проміжний етап)

package.json

@@ -19,12 +19,14 @@
     "@reduxjs/toolkit": "^2.2.1",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "axios": "^1.6.8",
+    "i18next": "^23.10.1",
     "modern-normalize": "^2.0.0",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-datepicker": "^6.3.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.51.0",
+    "react-i18next": "^14.1.0",
     "react-redux": "^9.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.15.0",

src/components/DailyNorma/DailyEdit.styled.js

@@ -5,12 +5,17 @@ export const DailyWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  border: 1px solid #ecf2ff;
+
   border-radius: 10px;
   padding-top: 8px;
   gap: 12px;
   width: 164px;
   height: 74px;
+
+  background-color: ${(props) => props.theme.dailyWrapperBackground};
+  border: ${(props) => props.theme.dailyWrapperBorder};
+  box-shadow: ${(props) => props.theme.dailyWrapperBoxShadow};
+
   @media only screen and (min-width: 768px) {
     margin-bottom: -45px;
   }

src/components/DailyNorma/WaterRatio.styled.js

@@ -75,7 +75,7 @@ export const Svg = styled.svg``;
 
 export const StyledRangeInput = styled.input`
   -webkit-appearance: none;
-  /* width: 256px; */
+
   width: 100%;
   height: 8px;
   border-radius: 10px;

src/components/Header/DivSetting.jsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+const DivSetting = () => {
+  const { t, i18n } = useTranslation();
+  const [currentLanguage, setCurrentLanguage] = useState(i18n.language);
+
+  useEffect(() => {
+    const language = localStorage.getItem('language');
+    if (language && language !== currentLanguage) {
+      i18n.changeLanguage(language);
+      setCurrentLanguage(language);
+    }
+  }, [i18n, currentLanguage]);
+
+  const handleChangeLanguage = (language) => {
+    i18n.changeLanguage(language);
+    setCurrentLanguage(language);
+    localStorage.setItem('language', language);
+  };
+
+  return (
+    <div>
+      <div>
+        <button onClick={() => handleChangeLanguage('uk')}>Українська</button>
+        <button onClick={() => handleChangeLanguage('en')}>English</button>
+      </div>
+    </div>
+  );
+};
+
+export default DivSetting;

src/components/Header/Header.jsx

@@ -11,6 +11,7 @@ import { useSelector } from 'react-redux';
 import { selectUser } from '../../store/auth/selectors';
 import { HeaderUserName } from './HeaderModalStyled';
 import { useEffect, useState } from 'react';
+import DivSetting from './DivSetting';
 
 const Header = () => {
   const userProfile = useSelector(selectUser);
@@ -36,7 +37,7 @@ const Header = () => {
         <Link to="/" style={{ textDecoration: 'none' }}>
           <SvgIconMobail />
         </Link>
-
+        <DivSetting />
         <HeaderDivButtonContainer>
           {userProfile ? (
             <>

src/components/Header/HeaderModalStyled.jsx

@@ -269,7 +269,7 @@ export const HeaderUserName = styled.span`
   font-size: 18px;
 
   text-align: right;
-  color: #2f2f2f;
+
   padding-right: 8px;
 `;
 

src/components/Header/ThemeStyled/SwitchTheme/MoonIcon.jsx

@@ -0,0 +1,13 @@
+import { withTheme } from 'styled-components';
+
+function MoonIcon(props) {
+  return (
+    <svg viewBox="0 0 24 24" width="24" height="24">
+      <path
+        fill={props.theme.icon}
+        d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"
+      ></path>
+    </svg>
+  );
+}
+export default withTheme(MoonIcon);

src/components/Header/ThemeStyled/SwitchTheme/SunIcon.jsx

@@ -0,0 +1,16 @@
+import { useTheme } from 'styled-components';
+
+function SunIcon() {
+  const theme = useTheme();
+
+  return (
+    <svg viewBox="0 0 24 24" width="24" height="24">
+      <path
+        fill={theme.icon}
+        d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"
+      ></path>
+    </svg>
+  );
+}
+
+export default SunIcon;

src/components/Header/ThemeStyled/SwitchTheme/Switch.css

@@ -0,0 +1,39 @@
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 25px;
+  margin: 0 0.75rem;
+}
+.toggle-switch input[type='checkbox'] {
+  display: none;
+}
+.toggle-switch .switch {
+  position: absolute;
+  cursor: pointer;
+  background-color: #b6b6b6;
+  border-radius: 25px;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transition: background-color 0.2s ease;
+}
+.toggle-switch .switch::before {
+  position: absolute;
+  content: '';
+  left: 2px;
+  top: 2px;
+  width: 21px;
+  height: 21px;
+  background-color: #333;
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+}
+.toggle-switch input[type='checkbox']:checked + .switch::before {
+  transform: translateX(25px);
+  background-color: #333;
+}
+.toggle-switch input[type='checkbox']:checked + .switch {
+  background-color: #2bc6ff;
+}

src/components/Header/ThemeStyled/SwitchTheme/Switch.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import './Switch.css';
+import MoonIcon from './MoonIcon';
+import SunIcon from './SunIcon';
+
+function Switch({ toggleTheme, isDarkTheme }) {
+  const [isToggled, setIsToggled] = useState(isDarkTheme);
+
+  const onToggle = () => {
+    setIsToggled(!isToggled);
+    toggleTheme();
+  };
+
+  return (
+    <>
+      <MoonIcon />
+      <label className="toggle-switch">
+        <input type="checkbox" checked={isToggled} onChange={onToggle} />
+        <span className="switch" />
+      </label>
+      <SunIcon />
+    </>
+  );
+}
+
+export default Switch;