Initial integration of light dark toggle using themeprovider (#20)

* update Readme * Initial integration of light dark toggle using themeprovider * Moving theme-provider into providers directory in ui --------- Co-authored-by: kenny-io <[email protected]>
shardeum · Jan 9, 2025 · 59c9918 · 59c9918
1 parent e5508bf
commit 59c9918
Show file tree

Hide file tree

Showing 11 changed files with 270 additions and 180 deletions.
diff --git a/app/globals.css b/app/globals.css
@@ -43,6 +43,7 @@
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
     --radius: 0.5rem;
+    --destructive: 0 84.2% 60.2%;
   }
   .dark {
     --background: 0 0% 3.9%;
@@ -69,6 +70,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --destructive: 0 70% 50%;
   }
 }
 
@@ -80,3 +82,4 @@
     @apply bg-background text-foreground;
   }
 }
+
diff --git a/app/latency/page.tsx b/app/latency/page.tsx
@@ -1,15 +1,11 @@
-
-import { LatencyMonitor } from '@/components/LatencyMonitor'
+import { LatencyMonitor } from '@/components/LatencyMonitor';
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-gray-50 p-8">
+    <main className="min-h-screen bg-background p-8 text-foreground">
       <div className="max-w-7xl mx-auto">
-
         <LatencyMonitor />
-
-
       </div>
     </main>
-  )
-}
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,10 +1,13 @@
 import './globals.css';
 import type { Metadata } from 'next';
 import { Inter } from 'next/font/google';
+import {ThemeProvider} from "@/components/ui/providers/theme-provider";
 
 const inter = Inter({ subsets: ['latin'] });
 import { Footer } from '@/components/Footer';
 import { Header } from '@/components/Header';
+
+
 export const metadata: Metadata = {
   title: 'Shardeum Network Status Monitor',
   description: 'Monitor the uptime and latency of the Shardeum network',
@@ -18,9 +21,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
+      <ThemeProvider attribute="class">
         <Header />
         {children}
         <Footer />
+      </ThemeProvider>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,13 +1,15 @@
-import { UptimeMonitor } from "@/components/UptimeMonitor"
+import { UptimeMonitor } from "@/components/UptimeMonitor";
 
 export default function Home() {
   return (
-    <main className="min-h-screen bg-gray-50 p-8">
+    <main className="min-h-screen bg-background p-8 text-foreground">
       <div className="max-w-7xl mx-auto">
         <h1 className="text-4xl font-bold mb-8">Service Status Monitor</h1>
         <div className="flex justify-between items-center mb-6">
-          <h2 className="text-xl font-medium text-gray-600">Last 30 Days</h2>
-          <div className="flex items-center gap-4 text-sm text-gray-500">
+          <h2 className="text-xl font-medium text-secondary-foreground">
+            Last 30 Days
+          </h2>
+          <div className="flex items-center gap-4 text-muted-foreground">
             <div className="flex items-center gap-2">
               <div className="w-3 h-3 bg-green-500 rounded"></div>
               <span>Online</span>
@@ -21,13 +23,13 @@ export default function Home() {
               <span>Offline</span>
             </div>
             <div className="flex items-center gap-2">
-              <div className="w-3 h-3 bg-gray-300 rounded"></div>
+              <div className="w-3 h-3 bg-muted rounded"></div>
               <span>No Data</span>
             </div>
           </div>
         </div>
         <UptimeMonitor />
       </div>
     </main>
-  )
-}
+  );
+}
diff --git a/app/realtime/page.tsx b/app/realtime/page.tsx
@@ -1,28 +1,27 @@
-"use client"
+"use client";
 
-import { Card } from '@/components/ui/card'
-import { CheckCircle, XCircle, AlertCircle } from 'lucide-react'
-import { useRealtimeStatus } from '@/hooks/useRealtimeStatus'
-import { CountdownTimer } from '@/components/CountdownTimer'
-import { Loader2 } from 'lucide-react'
-import { format } from 'date-fns'
+import { Card } from "@/components/ui/card";
+import { CheckCircle, XCircle, AlertCircle, Loader2 } from "lucide-react";
+import { useRealtimeStatus } from "@/hooks/useRealtimeStatus";
+import { format } from "date-fns";
 
 const REFRESH_INTERVAL = 10000; // 10 seconds
 
 export default function RealtimePage() {
-  const { services, loading, error, lastUpdated, refresh } = useRealtimeStatus(REFRESH_INTERVAL);
+  const { services, loading, error, lastUpdated } =
+    useRealtimeStatus(REFRESH_INTERVAL);
 
   if (loading) {
     return (
-      <div className="flex justify-center items-center min-h-screen">
-        <Loader2 className="h-8 w-8 animate-spin text-gray-500" />
+      <div className="flex justify-center items-center min-h-screen bg-background text-foreground">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </div>
     );
   }
 
   if (error) {
     return (
-      <div className="text-center text-red-500 p-4">
+      <div className="text-center text-destructive pt-8">
         Failed to load service status: {error.message}
       </div>
     );
@@ -38,54 +37,53 @@ export default function RealtimePage() {
   }, {} as Record<string, typeof services>);
 
   return (
-    <main className="min-h-screen bg-gray-50 p-8">
+    <main className="min-h-screen bg-background p-8 text-foreground">
       <div className="max-w-7xl mx-auto">
         <div className="flex justify-between items-center mb-8">
           <h1 className="text-4xl font-bold">Current Network Status</h1>
           <div className="flex items-center gap-4">
-            <div className="text-sm text-gray-500">
-              Last updated: {format(lastUpdated, 'HH:mm:ss')}
+            <div className="text-sm text-muted-foreground">
+              Last updated: {format(lastUpdated, "HH:mm:ss")}
             </div>
-
           </div>
         </div>
-        
+
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          {Object.entries(groupedServices).map(([group, services]) => (
-            services.map(service => (
-              <Card 
-                key={service.name} 
-                className="p-6 relative transition-all duration-200 ease-in-out"
+          {Object.entries(groupedServices).map(([group, services]) =>
+            services.map((service) => (
+              <Card
+                key={service.name}
+                className="p-6 relative transition-all duration-200 ease-in-out bg-card text-card-foreground"
               >
                 <div className="absolute top-6 right-6">
                   {service.status === -1 ? (
-                    <AlertCircle className="h-6 w-6 text-gray-400" />
+                    <AlertCircle className="h-6 w-6 text-muted-foreground" />
                   ) : service.status === 1 ? (
                     <CheckCircle className="h-6 w-6 text-green-500" />
                   ) : (
-                    <XCircle className="h-6 w-6 text-red-500" />
+                    <XCircle className="h-6 w-6 text-destructive" />
                   )}
                 </div>
-                
+
                 <h2 className="text-2xl font-bold mb-2">{service.name}</h2>
-                <p className="text-gray-600">
-                  {service.status === -1 
-                    ? 'Unknown'
-                    : service.status === 1 
-                    ? 'Operational'
-                    : 'Down'}
+                <p className="text-secondary-foreground">
+                  {service.status === -1
+                    ? "Unknown"
+                    : service.status === 1
+                    ? "Operational"
+                    : "Down"}
                 </p>
-                
+
                 {service.latency !== undefined && (
-                  <p className="text-sm text-gray-500 mt-2">
+                  <p className="text-sm text-muted-foreground mt-2">
                     Response time: {service.latency.toFixed(0)}ms
                   </p>
                 )}
               </Card>
             ))
-          ))}
+          )}
         </div>
       </div>
     </main>
   );
-}
+}
diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,78 +1,90 @@
-
 const navigation = {
-    main: [
-        { name: 'About', href: 'https://shardeum.org/' },
-        { name: 'Blog', href: 'https://shardeum.org/blog/' },
-        { name: 'Careers', href: 'https://careers.shardeum.org/companies' },
-        { name: 'Developers', href: 'https://shardeum.org/developers/' },
-        { name: 'Whitepaper', href: 'https://shardeum.org/Shardeum_Whitepaper.pdf' },
-        { name: 'FAQs', href: 'https://shardeum.org/faq/general/' },
-    ],
-    social: [
-
-        {
-            name: 'X',
-            href: 'https://twitter.com/shardeum',
-            icon: (props: any) => (
-                <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-                    <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
-                </svg>
-            ),
-        },
-        {
-            name: 'GitHub',
-            href: 'https://github.com/shardeum/',
-            icon: (props: any) => (
-                <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-                    <path
-                        fillRule="evenodd"
-                        d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            ),
-        },
-        {
-            name: 'YouTube',
-            href: 'https://www.youtube.com/channel/UCO20LJZBF-lYbc6PWVvwkMA',
-            icon: (props: any) => (
-                <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
-                    <path
-                        fillRule="evenodd"
-                        d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
-                        clipRule="evenodd"
-                    />
-                </svg>
-            ),
-        },
-    ],
-}
+  main: [
+    { name: "About", href: "https://shardeum.org/" },
+    { name: "Blog", href: "https://shardeum.org/blog/" },
+    { name: "Careers", href: "https://careers.shardeum.org/companies" },
+    { name: "Developers", href: "https://shardeum.org/developers/" },
+    {
+      name: "Whitepaper",
+      href: "https://shardeum.org/Shardeum_Whitepaper.pdf",
+    },
+    { name: "FAQs", href: "https://shardeum.org/faq/general/" },
+  ],
+  social: [
+    {
+      name: "X",
+      href: "https://twitter.com/shardeum",
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
+        </svg>
+      ),
+    },
+    {
+      name: "GitHub",
+      href: "https://github.com/shardeum/",
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+    {
+      name: "YouTube",
+      href: "https://www.youtube.com/channel/UCO20LJZBF-lYbc6PWVvwkMA",
+      icon: (props: any) => (
+        <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+          <path
+            fillRule="evenodd"
+            d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
+            clipRule="evenodd"
+          />
+        </svg>
+      ),
+    },
+  ],
+};
 
 export const Footer = () => {
-    return (
-        <footer className="bg-white">
-            <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
-                <nav className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12" aria-label="Footer">
-                    {navigation.main.map((item) => (
-                        <div key={item.name} className="pb-6">
-                            <a href={item.href} className="text-sm leading-6 text-gray-600 hover:text-gray-900">
-                                {item.name}
-                            </a>
-                        </div>
-                    ))}
-                </nav>
-                <div className="mt-10 flex justify-center space-x-10">
-                    {navigation.social.map((item) => (
-                        <a key={item.name} href={item.href} className="text-gray-400 hover:text-gray-500">
-                            <span className="sr-only">{item.name}</span>
-                            <item.icon className="h-6 w-6" aria-hidden="true" />
-                        </a>
-                    ))}
-                </div>
-                <p className="mt-10 text-center text-xs leading-5 text-gray-500">
-                    &copy; {new Date(Date.now()).getFullYear()} Shardeum, Inc. All rights reserved.
-                </p>
+  return (
+    <footer className="bg-background text-foreground">
+      <div className="mx-auto max-w-7xl overflow-hidden px-6 py-20 sm:py-24 lg:px-8">
+        <nav
+          className="-mb-6 columns-2 sm:flex sm:justify-center sm:space-x-12"
+          aria-label="Footer"
+        >
+          {navigation.main.map((item) => (
+            <div key={item.name} className="pb-6">
+              <a
+                href={item.href}
+                className="text-sm leading-6 text-muted-foreground hover:text-primary"
+              >
+                {item.name}
+              </a>
             </div>
-        </footer>
-    )
-}
+          ))}
+        </nav>
+        <div className="mt-10 flex justify-center space-x-10">
+          {navigation.social.map((item) => (
+            <a
+              key={item.name}
+              href={item.href}
+              className="text-muted-foreground hover:text-primary"
+            >
+              <span className="sr-only">{item.name}</span>
+              <item.icon className="h-6 w-6" aria-hidden="true" />
+            </a>
+          ))}
+        </div>
+        <p className="mt-10 text-center text-xs leading-5 text-muted-foreground">
+          &copy; {new Date(Date.now()).getFullYear()} Shardeum, Inc. All rights
+          reserved.
+        </p>
+      </div>
+    </footer>
+  );
+};