Light toggle

app/layout.tsx

@@ -5,8 +5,8 @@ import "./globals.css";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "CallFi Dashboard",
-  description: "Generated by create next app",
+  description: "Call out next big mover and win!",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,5 +1,8 @@
+"use client";  // This line marks the file as a client component
+
+import React, { useState, useEffect } from "react";
+import { SunIcon, MoonIcon } from "@heroicons/react/solid";
 import Image from "next/image";
-import React from "react";
 
 // Helper functions to generate pseudo data
 const generateRandomName = () => {
@@ -32,19 +35,39 @@ const generateTableData = (rows) => {
 const tableData = generateTableData(10);
 
 export default function Home() {
+  const [darkMode, setDarkMode] = useState(true);
+
+  useEffect(() => {
+    if (darkMode) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
+  }, [darkMode]);
+
+  const toggleDarkMode = () => {
+    setDarkMode(!darkMode);
+    document.documentElement.classList.toggle("dark", !darkMode);
+  };
+
   return (
-    <main className="flex flex-col min-h-screen items-center justify-between">
+    <main className={`flex flex-col min-h-screen items-center justify-between ${darkMode ? "bg-gray-900 text-white" : "bg-white text-black"}`}>
-      <header className="w-full flex justify-between items-center p-4 text-white bg-gray-800">
+      <header className="w-full flex justify-between items-center p-4 bg-gray-800 text-white">
         <h1 className="text-xl font-bold">CallFi</h1>
-        <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+        <div className="flex items-center">
-          Login
+          <button onClick={toggleDarkMode} className="bg-gray-700 hover:bg-gray-500 text-white font-bold py-2 px-4 rounded mr-2">
-        </button>
+            {darkMode ? <SunIcon className="h-5 w-5 text-white" /> : <MoonIcon className="h-5 w-5 text-white" />}
+          </button>
+          <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+            Login
+          </button>
+        </div>
       </header>
       <div className="flex-grow flex flex-col items-center justify-center w-full p-4">
         <h2 className="text-2xl font-bold mb-4">Leaderboard</h2>
         <div className="w-full max-w-4xl">
-          <table className="min-w-full bg-white rounded-lg overflow-hidden shadow-lg">
+          <table className={`min-w-full rounded-lg overflow-hidden shadow-lg ${darkMode ? "bg-gray-800" : "bg-white"}`}>
-            <thead className="bg-gray-800 text-white">
+            <thead className={`bg-gray-800 text-white`}>
               <tr>
                 <th className="py-2 px-4">Name</th>
                 <th className="py-2 px-4">Coin</th>
@@ -53,7 +76,7 @@ export default function Home() {
             </thead>
             <tbody>
               {tableData.map((row, index) => (
-                <tr key={index} className="odd:bg-gray-100 even:bg-gray-200">
+                <tr key={index} className={`${index % 2 === 0 ? (darkMode ? "bg-gray-700" : "bg-gray-100") : (darkMode ? "bg-gray-600" : "bg-gray-200")}`}>
                   <td className="py-2 px-4 text-center">{row.name}</td>
                   <td className="py-2 px-4 text-center">{row.coin}</td>
                   <td className="py-2 px-4 text-center">{row.point}</td>

package-lock.json

@@ -8,6 +8,7 @@
       "name": "callfi",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^1.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
@@ -106,6 +107,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-1.0.6.tgz",
+      "integrity": "sha512-JJCXydOFWMDpCP4q13iEplA503MQO3xLoZiKum+955ZCtHINWnx26CUxVxxFQu/uLb4LW3ge15ZpzIkXKkJ8oQ==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.14",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^1.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",