add dark theme.

MohammadrezaAmani · Apr 12, 2024 · 06d2671 · 06d2671
1 parent 7b9e532
commit 06d2671
Show file tree

Hide file tree

Showing 10 changed files with 59 additions and 65 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -47,7 +47,7 @@ const CoursesDetails = React.lazy(
 
 export function App() {
   const { lang, setLang } = useLang();
-  const { theme } = useTheme();
+  const { theme, setTheme } = useTheme();
   useEffect(() => {
     const updateLanguage = (newLang: string) => {
       if (!Object.keys(langs).includes(newLang)) {
@@ -70,6 +70,22 @@ export function App() {
     initializeLanguage();
   }, [setLang]);
 
+  useEffect(() => {
+    const updateTheme = (newTheme: string) => {
+      startTransition(() => {
+        setTheme(newTheme);
+        localStorage.setItem("theme", newTheme);
+      });
+    };
+    const initializeTheme = () => {
+      const newTheme = localStorage.getItem("theme") || "";
+      if (newTheme) {
+        updateTheme(newTheme);
+      }
+    };
+    initializeTheme();
+  }, [setTheme]);
+
   const memoizedHeader = useMemo(() => {
     return <Header />;
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -11,7 +11,7 @@ export function Layout({
     <div className="flex flex-col justify-between h-screen space-y-2">
       <div className="flex flex-col w-full">
         {memoizedHeader}
-        {children}
+        <div className="flex flex-col mt-20 items-center">{children}</div>
         {memoizedFooter}
       </div>
     </div>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -19,8 +19,8 @@ export default function Blog({ slug }: commonArgs) {
 
   return (
     <div className="relative dark:text-white">
-      <div className="flex flex-col justify-between dark:bg-gray-900">
-        <div className="flex flex-wrap justify-center sm:mt-32 w-full gap-4">
+      <div className="flex flex-col justify-between">
+        <div className="flex flex-wrap justify-center sm:mt-10 w-full gap-4">
           <div
             className={`flex p-4 sm:p-8 w-10/12 sm:w-auto h-auto justify-center mt-12 sm:mt-0 ${boxStyle}`}
           >

diff --git a/src/components/dataItem.tsx b/src/components/dataItem.tsx
@@ -44,7 +44,7 @@ export const DataItem: React.FC<dataType> = ({ data, slug }) => {
         {data.tags.map((tag, index) => (
           <span
             key={index}
-            className={`p-1 rounded-md ${bgColorClass} ${textColorClass}`}
+            className={`p-1 rounded-md dark:bg-gray-700 bg-gray-200 rtl:space-x-reverse space-x-2 text-sm font-thin`}
           >
             <a href={BaseUri + routes.category.path + "/" + tag}>{"#" + tag}</a>
           </span>

diff --git a/src/components/dataResultComponent.tsx b/src/components/dataResultComponent.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect, useState } from "react";
-import { Grid, CircularProgress } from "@mui/material";
 
 import { SearchBar } from "../components/search-bar";
 import { resultType, Data as DataType } from "../configs/types";
 import { DataItem } from "./dataItem";
 import { useLang } from "../hooks/langHook";
-import { useTheme } from "../hooks/themeHook"; // Import useTheme hook
 
 const shownItemsPerPage = 12;
 
@@ -24,14 +22,13 @@ const filterData = (data: DataType[], searchText: string, lang: string) =>
 
 export const Data: React.FC<resultType> = (props) => {
   const { lang } = useLang();
-  const { theme } = useTheme(); // Access the theme state
   const [pageData, setPageData] = useState<DataType[]>([]);
   const [pageNumber, setPageNumber] = useState(1);
-  const [loading, setLoading] = useState(true);
+  // const [loading, setLoading] = useState(true);
   const data = props.data;
   useEffect(() => {
     setPageData(data.slice(0, pageNumber * shownItemsPerPage));
-    setLoading(false);
+    // setLoading(false);
   }, [data, pageNumber]);
 
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -65,35 +62,16 @@ export const Data: React.FC<resultType> = (props) => {
   }, []);
 
   // Define classes based on theme
-  const searchBarClass = theme === "light" ? "bg-white" : "bg-gray-800";
-
   return (
-    <div className="m-8">
-      <div className={`flex flex-row ${searchBarClass}`}>
-        {" "}
-        {/* Apply conditional class */}
+    <div className="mt-20 m-8">
+      <div className={`flex flex-row `}>
         <SearchBar handleSearch={handleSearch} />
       </div>
-      <Grid container spacing={4} justifyContent="center mt-4">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
         {pageData.map((item, index) => (
-          <Grid
-            item
-            xs={12}
-            sm={6}
-            md={4}
-            lg={3}
-            key={index}
-            className="grid-flow-dense"
-          >
-            <DataItem data={item} slug={props.slug} />
-          </Grid>
+          <DataItem key={index} data={item} slug={props.slug} />
         ))}
-      </Grid>
-      {loading && (
-        <div className="flex justify-center mt-4">
-          <CircularProgress />
-        </div>
-      )}
+      </div>
       <div id="observer"></div>
     </div>
   );

diff --git a/src/components/dataResultDetailsComponent.tsx b/src/components/dataResultDetailsComponent.tsx
@@ -52,7 +52,7 @@ export function DataDetails({ slug, data }: dataType) {
           <img src={data.image} alt="data" className="w-full mb-4 rounded-lg" />
           <p className={`mb-4 ${textColorClass}`}>{lang_data.description}</p>
           <div
-            className={`bg-gray-100 p-8 rounded-lg shadow-md my-3 ${textColorClass}`}
+            className={`bg-gray-100 dark:bg-gray-400 p-4 sm:p-6 rounded-lg shadow-md my-3 ${textColorClass}`}
           >
             {lang_data.data}
           </div>

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -44,7 +44,7 @@ function Footer(props: commonArgs) {
             points: 4,
           }}
         ></Wave>
-        <div className="flex justify-center px-1 pb-5">
+        <div className="flex justify-center px-1 pb-5 bg-gray-900">
           <PiLinkedinLogoThin className={` bg-blue-700 ${buttonSize}`} />
           <VscGithubAlt className={` bg-gray-700 ${buttonSize}`} />
           <IoMdContact className={` bg-green-700 ${buttonSize}`} />

diff --git a/src/components/header.tsx b/src/components/header.tsx
@@ -77,34 +77,35 @@ const Header = () => {
                       </a>
                     </li>
                   ))}
+
+                  <div className="flex items-center space-x-4">
+                    <PiTranslate
+                      onClick={toggleLang}
+                      className={`w-5 h-5 cursor-pointer ${iconTextColor} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300"`}
+                    />
+                    {theme === "light" ? (
+                      <CiLight
+                        className="w-6 h-6 cursor-pointer text-yellow-400"
+                        onClick={toggleTheme}
+                      />
+                    ) : (
+                      <CiDark
+                        className="w-6 h-6 cursor-pointer text-white"
+                        onClick={toggleTheme}
+                      />
+                    )}
+                    {profile.socials.map((item, index) => (
+                      <a
+                        href={item.url}
+                        key={index}
+                        className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300"
+                      >
+                        {<item.icon className="h-6 w-6" />}
+                      </a>
+                    ))}
+                  </div>
                 </ul>
               </nav>
-              <div className="flex items-center space-x-4">
-                <PiTranslate
-                  onClick={toggleLang}
-                  className={`w-5 h-5 cursor-pointer ${iconTextColor} text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300"`}
-                />
-                {theme === "light" ? (
-                  <CiLight
-                    className="w-6 h-6 cursor-pointer text-yellow-400"
-                    onClick={toggleTheme}
-                  />
-                ) : (
-                  <CiDark
-                    className="w-6 h-6 cursor-pointer text-white"
-                    onClick={toggleTheme}
-                  />
-                )}
-                {profile.socials.map((item, index) => (
-                  <a
-                    href={item.url}
-                    key={index}
-                    className="text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-300"
-                  >
-                    {<item.icon className="h-6 w-6" />}
-                  </a>
-                ))}
-              </div>
             </div>
             <div className="md:hidden flex items-center">
               <button

diff --git a/src/hooks/themeHook.tsx b/src/hooks/themeHook.tsx
@@ -24,9 +24,8 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
     document.documentElement.classList.toggle("dark");
     // update the localStorage
     localStorage.setItem("theme", theme === "light" ? "dark" : "light");
-    // update background color
     if (theme === "light") {
-      document.documentElement.style.backgroundColor = "#1a202c";
+      document.documentElement.style.backgroundColor = "rgb(17 24 39)";
     } else {
       document.documentElement.style.backgroundColor = "#fff";
     }

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -37,5 +37,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require("@headlessui/tailwindcss")],
+  plugins: [],
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -37,5 +37,5 @@ module.exports = { @@
           },
         },
       },
-      plugins: [require("@headlessui/tailwindcss")],
+      plugins: [],
     };