Updated Register.tsx

Yeasir0032 · May 28, 2024 · 2c6b3b3 · 2c6b3b3
1 parent c68493c
commit 2c6b3b3
Showing 1 changed file with 19 additions and 22 deletions.
diff --git a/components/home-layouts/Register.tsx b/components/home-layouts/Register.tsx
@@ -1,46 +1,42 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { Button } from '@radix-ui/react-button';
 import { SunIcon, MoonIcon } from '@heroicons/react/solid';
+import { useTheme } from 'next-themes';
 
 const backgroundImageUrl = 'https://source.unsplash.com/random/1920x1080'; // Replace with desired URL from Unsplash
 
-const RegisterPage: React.FC = () => {
-  const [darkMode, setDarkMode] = useState(false);
+const RegisterPage = () => {
+  const { theme, setTheme } = useTheme();
 
-  const toggleDarkMode = () => {
-    setDarkMode(!darkMode);
-    if (darkMode) {
-      document.documentElement.classList.remove('dark');
-    } else {
-      document.documentElement.classList.add('dark');
-    }
+  const toggleTheme = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
   };
 
   return (
-    <div className={`${darkMode ? 'dark' : ''} min-h-screen flex flex-col items-center justify-center bg-cover`} style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
+    <div className="min-h-screen flex flex-col items-center justify-center bg-cover" style={{ backgroundImage: `url(${backgroundImageUrl})` }}>
       <div className="absolute top-4 right-4">
-        <Button onClick={toggleDarkMode} className="p-2 bg-gray-800 text-white rounded-full">
-          {darkMode ? <SunIcon className="h-6 w-6" /> : <MoonIcon className="h-6 w-6" />}
+        <Button onClick={toggleTheme} className="p-2 bg-gray-800 text-white rounded-full">
+          {theme === 'dark' ? <SunIcon className="h-6 w-6" /> : <MoonIcon className="h-6 w-6" />}
         </Button>
       </div>
       <div className="bg-white dark:bg-gray-800 dark:text-white p-6 rounded-lg shadow-lg max-w-md w-full">
         <h2 className="text-2xl font-bold mb-6 text-center">Create an account</h2>
         <form>
           <div className="mb-4">
-            <label className="block text-sm font-bold mb-2" htmlFor="email">Email</label>
-            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="email" id="email" required />
+            <label className="block text-sm font-bold mb-2 text-black dark:text-white" htmlFor="email">Email</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="email" id="email" required />
           </div>
           <div className="mb-4">
-            <label className="block text-sm font-bold mb-2" htmlFor="displayName">Display Name</label>
-            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="text" id="displayName" required />
+            <label className="block text-sm font-bold mb-2 text-black dark:text-white" htmlFor="displayName">Display Name</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="displayName" required />
           </div>
           <div className="mb-4">
-            <label className="block text-sm font-bold mb-2" htmlFor="username">Username</label>
-            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="text" id="username" required />
+            <label className="block text-sm font-bold mb-2 text-black dark:text-white" htmlFor="username">Username</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="text" id="username" required />
           </div>
           <div className="mb-4">
-            <label className="block text-sm font-bold mb-2" htmlFor="password">Password</label>
-            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600" type="password" id="password" required />
+            <label className="block text-sm font-bold mb-2 text-black dark:text-white" htmlFor="password">Password</label>
+            <input className="w-full p-2 border border-gray-300 rounded-lg dark:bg-gray-700 dark:border-gray-600 dark:text-white" type="password" id="password" required />
           </div>
           <div className="flex items-center justify-between mb-6">
             <Button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" type="submit">
@@ -49,7 +45,7 @@ const RegisterPage: React.FC = () => {
           </div>
         </form>
         <Button className="w-full bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded flex items-center justify-center">
-          <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Google_Logo.png" alt="Google Logo" className="w-6 h-6 mr-2" />
+          {/* <img src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Google_Logo.png" alt="Google Logo" className="w-6 h-6 mr-2" /> */}
           Continue with Google
         </Button>
       </div>
@@ -58,3 +54,4 @@ const RegisterPage: React.FC = () => {
 };
 
 export default RegisterPage;
+