- );
+ )
}
-export default About;
+export default About
diff --git a/src/components/DarkModeToggle.jsx b/src/components/DarkModeToggle.jsx
new file mode 100644
index 0000000..4b9316c
--- /dev/null
+++ b/src/components/DarkModeToggle.jsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react'
+import { useRecoilState } from 'recoil'
+import { darkModeState } from '../atoms'
+import Moon from '../moon.svg?react'
+import Sun from '../sun.svg?react'
+
+function DarkModeToggle() {
+ const [isDarkMode, setIsDarkMode] = useRecoilState(darkModeState)
+ const toggleDarkMode = () => {
+ const newMode = !isDarkMode
+ setIsDarkMode(newMode)
+ document.documentElement.classList.toggle('dark', newMode)
+ localStorage.setItem('darkMode', newMode)
+ }
+
+ useEffect(() => {
+ const savedDarkMode = localStorage.getItem('darkMode')
+ if (savedDarkMode === 'true') {
+ setIsDarkMode(true)
+ document.documentElement.classList.add('dark')
+ } else {
+ setIsDarkMode(false)
+ document.documentElement.classList.remove('dark')
+ }
+ }, [setIsDarkMode])
+
+ return (
+
+ )
+}
+
+export default DarkModeToggle
diff --git a/src/components/Feedback.jsx b/src/components/Feedback.jsx
index 869f9db..6251636 100644
--- a/src/components/Feedback.jsx
+++ b/src/components/Feedback.jsx
@@ -1,31 +1,33 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import axios from 'axios';
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import axios from 'axios'
function Feedback() {
- const { t } = useTranslation();
- const [name, setName] = useState('');
- const [email, setEmail] = useState('');
- const [country, setCountry] = useState('');
- const [message, setMessage] = useState('');
- const [error, setError] = useState('');
- const [isSended, setIsSended] = useState(false);
+ const { t } = useTranslation()
+ const [name, setName] = useState('')
+ const [email, setEmail] = useState('')
+ const [country, setCountry] = useState('')
+ const [message, setMessage] = useState('')
+ const [error, setError] = useState('')
+ const [isSended, setIsSended] = useState(false)
+ const [isFormValid, setIsFormValid] = useState(false)
const validation = () => {
- let error = null;
+ let error = null
if (!name || !country || !email || !message) {
- error = 'NotAllFieldFull';
+ error = 'NotAllFieldFull'
}
- return { error };
- };
+ setIsFormValid(!error)
+ return { error }
+ }
const handleSubmit = (e) => {
- e.preventDefault();
- setError('');
- const { error } = validation();
+ e.preventDefault()
+ setError('')
+ const { error } = validation()
if (error) {
- setError(error);
- return;
+ setError(error)
+ return
}
axios
.post(
@@ -33,70 +35,68 @@ function Feedback() {
JSON.stringify({ name, country, message, email })
)
.then((res) => {
- console.log({ res });
- setIsSended(true);
- setCountry('');
- setName('');
- setEmail('');
- setMessage('');
+ console.log({ res })
+ setIsSended(true)
+ setCountry('')
+ setName('')
+ setEmail('')
+ setMessage('')
})
.catch((err) => {
- console.log({ err });
- });
- };
+ console.log({ err })
+ })
+ }
useEffect(() => {
setTimeout(() => {
- setIsSended(false);
- }, 2000);
- }, [isSended]);
+ setIsSended(false)
+ }, 2000)
+ }, [isSended])
return (
- <>
-