From 4aa69b5ac6b7ad44c8d5dc645d589e132ed5ce57 Mon Sep 17 00:00:00 2001
From: Jagankumar <53823168+jagankumar-egov@users.noreply.github.com>
Date: Wed, 3 Jul 2024 08:47:42 +0530
Subject: [PATCH] fixed build

---
 micro-frontends/sample/package.json           |  8 +++---
 micro-frontends/sample/src/examples/Theme.jsx | 27 ++++++++++++-------
 micro-frontends/sample/tailwind.config.js     |  2 ++
 3 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/micro-frontends/sample/package.json b/micro-frontends/sample/package.json
index 52de3aec23c..85675b1bfcd 100644
--- a/micro-frontends/sample/package.json
+++ b/micro-frontends/sample/package.json
@@ -10,10 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "i18next": "^23.11.5",
-    
-    "i18next-http-backend": "^2.5.2",
-    "idb": "^8.0.0",
+    "i18next": "23.11.5",
+    "axios":"1.7.2",
+    "i18next-http-backend": "2.5.2",
+    "idb": "8.0.0",
     "react": "19.0.0-beta-26f2496093-20240514",
     "react-dom": "19.0.0-beta-26f2496093-20240514",
     "react-hook-form": "7.52.0",
diff --git a/micro-frontends/sample/src/examples/Theme.jsx b/micro-frontends/sample/src/examples/Theme.jsx
index 1fb311d1d56..650f0842922 100644
--- a/micro-frontends/sample/src/examples/Theme.jsx
+++ b/micro-frontends/sample/src/examples/Theme.jsx
@@ -1,14 +1,24 @@
-import { createContext, useState, use } from 'react';
+import { createContext, useState, use,useEffect } from 'react';
 
 export const ThemeContext = createContext();
 
 const ThemeProvider = ({ children }) => {
-  const [theme, setTheme] = useState('light');
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    if (theme === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  }, [theme]);
 
   const toggleTheme = () => {
-    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+    setTheme(theme === 'light' ? 'dark' : 'light');
   };
 
+
   return (
     <ThemeContext.Provider value={{ theme, toggleTheme }}>
       {children}
@@ -29,18 +39,15 @@ const Card = ({ children }) => {
 
   return (
     <div
-      className={`max-w-l mx-auto rounded-lg p-6 ${
-        theme === 'light' ? 'bg-gray-100' : 'bg-gray-800'
-      }`}
+      className={`max-w-l mx-auto rounded-lg p-6
+       bg-white dark:bg-gray-800`}
     >
       <h1
-        className={`text-2xl my-3 ${
-          theme === 'light' ? 'text-gray-800' : 'text-white'
-        }`}
+        className={`text-2xl my-3  text-black dark:text-white`}
       >
         Theme Card
       </h1>
-      <p className={theme === 'light' ? 'text-gray-800' : 'text-white'}>
+      <p className={ 'text-black dark:text-white'}>
        Hello!! use() hook
       </p>
       {children}
diff --git a/micro-frontends/sample/tailwind.config.js b/micro-frontends/sample/tailwind.config.js
index d79a6521c8e..80d6bb2ccfc 100644
--- a/micro-frontends/sample/tailwind.config.js
+++ b/micro-frontends/sample/tailwind.config.js
@@ -2,6 +2,8 @@
 const themeSwapper = require('tailwindcss-theme-swapper')
 
 export default {
+  darkMode: 'class', // Enable dark mode based on a class
+
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",