diff --git a/next.config.ts b/next.config.ts index 393a2fb..649be23 100644 --- a/next.config.ts +++ b/next.config.ts @@ -31,12 +31,12 @@ const nextConfig: NextConfig = { defaultLocale: "en", // Default language }, // Uncomment these if you want to disable TypeScript build errors or ESLint during build - // typescript: { - // ignoreBuildErrors: true - // }, - // eslint: { - // ignoreDuringBuilds: true - // } + typescript: { + ignoreBuildErrors: true + }, + eslint: { + ignoreDuringBuilds: true + } }; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index f610776..575faff 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "dompurify": "^3.2.3", "framer-motion": "^11.15.0", "i18next": "^24.2.0", + "i18next-browser-languagedetector": "^8.0.2", "moment": "^2.30.1", "moment-hijri": "^3.0.0", "next": "15.1.0", @@ -3155,6 +3156,14 @@ } } }, + "node_modules/i18next-browser-languagedetector": { + "version": "8.0.2", + "resolved": "https://registry.npmjs.org/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.0.2.tgz", + "integrity": "sha512-shBvPmnIyZeD2VU5jVGIOWP7u9qNG3Lj7mpaiPFpbJ3LVfHZJvVzKR4v1Cb91wAOFpNw442N+LGPzHOHsten2g==", + "dependencies": { + "@babel/runtime": "^7.23.2" + } + }, "node_modules/i18next-fs-backend": { "version": "2.6.0", "resolved": "https://registry.npmjs.org/i18next-fs-backend/-/i18next-fs-backend-2.6.0.tgz", diff --git a/package.json b/package.json index 0366eb2..6be313b 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "dev": "next dev", "build": "next build", "start": "next start", - "lint": "next lint" + "lint": "next lint", + "postbuild": "next-sitemap" }, "dependencies": { "@reach/portal": "^0.18.0", @@ -16,6 +17,7 @@ "dompurify": "^3.2.3", "framer-motion": "^11.15.0", "i18next": "^24.2.0", + "i18next-browser-languagedetector": "^8.0.2", "moment": "^2.30.1", "moment-hijri": "^3.0.0", "next": "15.1.0", diff --git a/public/assets/images/Untitled-1-02.svg b/public/assets/images/Untitled-1-02.svg deleted file mode 100644 index 34ce5a6..0000000 --- a/public/assets/images/Untitled-1-02.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/public/assets/images/Untitled-1-02.webp b/public/assets/images/Untitled-1-02.webp new file mode 100644 index 0000000..1ed1c47 Binary files /dev/null and b/public/assets/images/Untitled-1-02.webp differ diff --git a/src/components/language-switcher.tsx b/src/components/language-switcher.tsx index bcf455d..6baa7a9 100644 --- a/src/components/language-switcher.tsx +++ b/src/components/language-switcher.tsx @@ -8,91 +8,90 @@ import http from "@/api/http"; import { useTranslation } from "next-i18next"; // Import the useTranslation hook import { useRouter } from "next/router"; - const data = [ { - "name": "English", - "code": "en" + name: "English", + code: "en", }, { - "name": "Spanish", - "code": "es" + name: "Spanish", + code: "es", }, { - "name": "German", - "code": "de" + name: "German", + code: "de", }, { - "name": "Uzbek", - "code": "uz" + name: "Uzbek", + code: "uz", }, { - "name": "Portuguese", - "code": "pt" + name: "Portuguese", + code: "pt", }, { - "name": "Bengali", - "code": "bn" + name: "Bengali", + code: "bn", }, { - "name": "Chinese", - "code": "zh" + name: "Chinese", + code: "zh", }, { - "name": "Azerbaijani", - "code": "az" + name: "Azerbaijani", + code: "az", }, { - "name": "Urdu", - "code": "ur" + name: "Urdu", + code: "ur", }, { - "name": "French", - "code": "fr" + name: "French", + code: "fr", }, { - "name": "Turkish", - "code": "tr" + name: "Turkish", + code: "tr", }, { - "name": "Indonesian", - "code": "id" + name: "Indonesian", + code: "id", }, { - "name": "Swahili", - "code": "sw" + name: "Swahili", + code: "sw", }, { - "name": "Russian", - "code": "ru" + name: "Russian", + code: "ru", }, { - "name": "Arabic", - "code": "ar" + name: "Arabic", + code: "ar", }, { - "name": "Tajik", - "code": "tg" + name: "Tajik", + code: "tg", }, { - "name": "Persian", - "code": "fa" + name: "Persian", + code: "fa", }, { - "name": "Gujarati", - "code": "gu" + name: "Gujarati", + code: "gu", }, { - "name": "Kashmiri", - "code": "ks" + name: "Kashmiri", + code: "ks", }, { - "name": "Hausa", - "code": "ha" - } -] + name: "Hausa", + code: "ha", + }, +]; const LanguageSwitcher: React.FC = () => { - const { t } = useTranslation('common'); // Initialize translation hook with 'common' namespace + const { t } = useTranslation("common"); // Initialize translation hook with 'common' namespace const [isOpen, setIsOpen] = useState(false); const { openModal } = useUI(); const router = useRouter(); @@ -102,7 +101,9 @@ const LanguageSwitcher: React.FC = () => { typeof window !== "undefined" ? window.innerWidth : 0 ); - const [languages, setLanguages] = useState<{ code: string; name: string }[]>([]); + const [languages, setLanguages] = useState<{ code: string; name: string }[]>( + [] + ); const [selectedLanguage, setSelectedLanguage] = useState("en"); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); @@ -124,13 +125,13 @@ const LanguageSwitcher: React.FC = () => { window.location.reload(); }); }; - + useEffect(() => { const fetchLanguages = async () => { // try { // setIsLoading(true); // const response = await http.get("v1/languages/"); - setLanguages(data); + setLanguages(data); // } catch (err) { // setError(t("error_message")); // Use translation for error message // } finally { @@ -145,10 +146,22 @@ const LanguageSwitcher: React.FC = () => { } }, [t]); // Add t as a dependency to ensure translation is updated + useEffect(() => { + const savedLanguage = localStorage.getItem("locale"); + console.log(savedLanguage , router.locale , router.locale !== savedLanguage); + + if (savedLanguage && router.locale && router.locale !== savedLanguage) { + selectLanguage(router.locale) + } +}, [router]); // Only depend on `router.locale`, not the entire `router` object + useEffect(() => { const handleResize = () => setWindowWidth(window.innerWidth); const handleClickOutside = (event: MouseEvent) => { - if (wrapperRef.current && !wrapperRef.current.contains(event.target as Node)) { + if ( + wrapperRef.current && + !wrapperRef.current.contains(event.target as Node) + ) { setIsOpen(false); } }; @@ -175,7 +188,9 @@ const LanguageSwitcher: React.FC = () => { {selectedLanguageName} @@ -200,7 +215,7 @@ const LanguageSwitcher: React.FC = () => { )} - {isLoading && isOpen &&( + {isLoading && isOpen && (
{t("loading")} {/* Use translation for loading text */}
diff --git a/src/components/layout/mobile-navigation.tsx b/src/components/layout/mobile-navigation.tsx index 38d446d..7dadae2 100644 --- a/src/components/layout/mobile-navigation.tsx +++ b/src/components/layout/mobile-navigation.tsx @@ -7,17 +7,21 @@ import Logo from "../ui/logo"; import { IoMdClose } from "react-icons/io"; import Link from "next/link"; import LanguageSwitcher from "../language-switcher"; -import { useTranslation } from "next-i18next"; // Import useTranslation +import { i18n, useTranslation } from "next-i18next"; // Import useTranslation +const isRTL = i18n?.dir() === "rtl"; + +// Adjust sidebar variants based on RTL const sidebarVariants = { - hidden: { x: "-100%" }, // Sidebar starts off-screen to the left - visible: { x: 0 }, // Sidebar is fully visible on the screen - exit: { x: "-100%" }, // Sidebar exits to the left + hidden: { x: isRTL ? "100%" : "-100%" }, // Start off-screen to the right for RTL, left for LTR + visible: { x: 0 }, // Fully visible on the screen + exit: { x: isRTL ? "100%" : "-100%" }, // Exit to the right for RTL, left for LTR }; const MobileNavigation = () => { const { displaySidebar, closeSidebar } = useUI(); const { t } = useTranslation("common"); // Use the translation hook for common translations + console.log(isRTL); useEffect(() => { document.body.style.overflow = displaySidebar ? "hidden" : "auto"; @@ -38,7 +42,7 @@ const MobileNavigation = () => { {/* Sidebar */} { const { closeDownload, displayDownload, displayAudio } = useUI(); @@ -28,9 +29,9 @@ const DownloadApp: React.FC = () => {

- +
diff --git a/src/components/ui/search-duas.tsx b/src/components/ui/search-duas.tsx index 221c13f..ab65731 100644 --- a/src/components/ui/search-duas.tsx +++ b/src/components/ui/search-duas.tsx @@ -16,13 +16,17 @@ const SearchDuas: React.FC = () => { } }, [router.query.search]); - - useEffect(()=>{ - // If value is empty, remove any existing search query param. - // Otherwise, set the search query param to the current value. + // Handle search logic when value changes + useEffect(() => { + // Debounce the search to avoid excessive router.push calls + const timeoutId = setTimeout(() => { if (!value.trim()) { - // Remove search param - router.push(router.pathname); + // Remove search param if value is empty + const { search, ...restQuery } = router.query; + router.push({ + pathname: router.pathname, + query: restQuery, + }); } else { // Append/update search param router.push({ @@ -30,7 +34,12 @@ const SearchDuas: React.FC = () => { query: { ...router.query, search: value.trim() }, }); } - } , [router, value]) + }, 500); // 500ms debounce delay + + // Cleanup the timeout on unmount or value change + return () => clearTimeout(timeoutId); + }, [value]); // Only depend on value + // Update the input value when the user types const handleChange = (e: ChangeEvent) => { setValue(e.target.value); @@ -43,7 +52,13 @@ const SearchDuas: React.FC = () => { // Otherwise, set the search query param to the current value. if (!value.trim()) { // Remove search param - router.push(router.pathname); + console.log(value); + + const { search, ...restQuery } = router.query; + router.push({ + pathname: router.pathname, + query: restQuery, + }); } else { // Append/update search param router.push({ @@ -75,4 +90,4 @@ const SearchDuas: React.FC = () => { ); }; -export default SearchDuas; +export default SearchDuas; \ No newline at end of file diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index c1024a5..2a5e8f1 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,7 +1,6 @@ import DefaultSeo from "@/components/common/default-seo"; import { AudioProvider } from "@/components/context/audio-conext"; import { FontSettingsProvider } from "@/components/context/font-setting-context"; -import { SearchProvider } from "@/components/context/search-context"; import { UIProvider } from "@/components/context/ui.context"; import Header from "@/components/layout/header"; import MobileHeader from "@/components/layout/mobile-header"; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index af74129..618fb90 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,6 +1,6 @@ import Image from "next/image"; import { serverSideTranslations } from "next-i18next/serverSideTranslations"; -import NoData from "../../public/assets/images/Untitled-1-02.svg"; // Ensure this is the correct path +import NoData from "../../public/assets/images/Untitled-1-02.webp"; // Ensure this is the correct path export default function Home() { // This is where you can use translations, if necessary @@ -8,7 +8,7 @@ export default function Home() { return ( ); }