Refactor component props to pass isDarkMode

preston176 · Feb 21, 2024 · ec49c8c · ec49c8c
1 parent 3b4bd5a
commit ec49c8c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 13 deletions.
diff --git a/src/Components/Hero/Hero.jsx b/src/Components/Hero/Hero.jsx
@@ -2,10 +2,8 @@ import React, { useContext } from 'react'
 import ImageSlider from '../ImageSlider/ImageSlider'
 import defaultImage from '../../assets/defaultImage.jpg'
 import { Link } from 'react-router-dom'
-import { ThemeContext } from '@emotion/react'
 
-const Hero = () => {
-    const { isDarkMode } = useContext(ThemeContext);
+const Hero = ({ isDarkMode }) => {
 
 
     const ThemeStyles = {

diff --git a/src/Components/Mid/Mid.jsx b/src/Components/Mid/Mid.jsx
@@ -1,11 +1,9 @@
 import BoltIcon from '@mui/icons-material/Bolt';
 import PsychologyIcon from '@mui/icons-material/Psychology';
 import MonetizationOnIcon from '@mui/icons-material/MonetizationOn';
-import { ThemeContext } from '@emotion/react';
-import { useContext } from 'react';
 
-const Mid = () => {
-    const { isDarkMode } = useContext(ThemeContext);
+const Mid = ({ isDarkMode }) => {
+
 
 
     const ThemeStyles = {

diff --git a/src/Components/Testimonial/Testimonial.jsx b/src/Components/Testimonial/Testimonial.jsx
@@ -8,8 +8,7 @@ const ThemeStyles = {
     light: 'bg-[#858585] shadow-gray-700 bg-opacity-10'
 }
 
-const Testimonial = () => {
-    const { isDarkMode } = useContext(ThemeContext);
+const Testimonial = ({ isDarkMode }) => {
     return (
         <section className={`py-12 bg-none sm:py-16 lg:py-20`}>
             <div className="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">

diff --git a/src/Pages/HomePage.jsx b/src/Pages/HomePage.jsx
@@ -1,15 +1,17 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import Hero from '../Components/Hero/Hero'
 import Mid from '../Components/Mid/Mid'
 import Testimonial from '../Components/Testimonial/Testimonial'
+import { ThemeContext } from '@emotion/react'
 
 const HomePage = () => {
+    const { isDarkMode } = useContext(ThemeContext);
     return (
 
         <>
-            <Hero />
-            <Mid />
-            <Testimonial />
+            <Hero isDarkMode={isDarkMode} />
+            <Mid isDarkMode={isDarkMode} />
+            <Testimonial isDarkMode={isDarkMode} />
         </>
 
     )