Update About page with dark mode support

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

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -23,7 +23,7 @@ const App = () => {
             <Routes>
               <Route path="/" element={<HomePage />} />
               <Route path="/generate_image" element={<ImageGen />} />
-              <Route path="/about" element={<About />} />
+              <Route path="/about" element={<About isDarkMode={isDarkMode} />} />
               <Route path="*" element={<h1>Not Found</h1>} />
             </Routes>
             <Footer />

diff --git a/src/Pages/About.jsx b/src/Pages/About.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react'
-import { Audio, ThreeDots } from 'react-loader-spinner'
+import React, { useEffect, useState } from 'react';
+import { Audio, ThreeDots } from 'react-loader-spinner';
 import OpenAI from "openai";
 
-const About = () => {
+const About = ({ isDarkMode }) => {
     const [models, setModels] = useState([]);
     const [showAllModels, setShowAllModels] = useState(false);
 
@@ -26,12 +26,12 @@ const About = () => {
     };
 
     return (
-        <div>
-            <h2 className='text-center font-bold text-[2rem] py-2'>About</h2>
-            <p className='font-bold text-center text-[1.4rem]'>Welcome to this AI Gen Project! </p>
-            <p className='text-[1.2rem]'>We are passionate about harnessing the power of AI to create innovative solutions for generating images, audio, and more. Our project leverages cutting-edge technology provided by OpenAI to enable users to explore the realm of artificial intelligence in creative ways.</p>
+        <div className={`${isDarkMode ? "text-white" : "text-black"} text-gray-900`}>
+            <h2 className='text-center font-bold text-2xl py-2'>About</h2>
+            <p className={`${isDarkMode ? "text-white" : "text-black"} font-bold text-center text-lg`}>Welcome to this AI Gen Project! </p>
+            <p className='text-lg text-center py-2'>We are passionate about harnessing the power of AI to create innovative solutions for generating images, audio, and more. <br /> Our project leverages cutting-edge technology provided by OpenAI to enable users to explore the realm of artificial intelligence in creative ways.</p>
             <div className="models-used">
-                <h3 className="text-[1.5rem] font-semibold mb-4 text-center">Models used:</h3>
+                <h3 className="text-xl font-semibold mb-4 text-center">Models used:</h3>
                 {
                     models.length === 0 ? (
                         <div className="flex flex-col m-auto">
@@ -40,7 +40,7 @@ const About = () => {
                     ) : (
                         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                             {models.slice(0, showAllModels ? models.length : 6).map((modelData, index) => (
-                                <div key={index} className="bg-white rounded-lg shadow-md p-4 ">
+                                <div key={index} className={`${isDarkMode ? 'bg-gray-800' : 'bg-white'}  rounded-lg shadow-md p-4 `}>
                                     <h4 className="text-xl font-semibold mb-2 bg-gradient-to-r from-red-500 to-blue-500 text-transparent bg-clip-text">{modelData.id}</h4>
                                     <p className="text-sm font-medium mb-1">Object: {modelData.object}</p>
                                     <p className="text-sm font-medium mb-1">Created: {new Date(modelData.created * 1000).toLocaleString()}</p>
@@ -59,7 +59,7 @@ const About = () => {
                 )}
             </div>
         </div>
-    )
-}
+    );
+};
 
 export default About;