-
-
-
- Get started by editing{" "}
-
- pages/index.js -- . -
- - Save and see your changes instantly. -
-
-
+ {/* Header */}
+
+
+
+
+ {error ? (
+
-
);
}
diff --git a/public/logo.svg b/public/logo.svg
new file mode 100644
index 0000000..cdd4c11
--- /dev/null
+++ b/public/logo.svg
@@ -0,0 +1,11 @@
+
+
diff --git a/styles/globals.css b/styles/globals.css
index 6b717ad..4eb68fe 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,20 +2,54 @@
@tailwind components;
@tailwind utilities;
-:root {
- --background: #ffffff;
- --foreground: #171717;
-}
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
-@media (prefers-color-scheme: dark) {
+@layer base {
:root {
- --background: #0a0a0a;
- --foreground: #ededed;
+ --background: 0 0% 0%;
+ --foreground: 0 0% 100%;
+ --accent: 154 98% 73%;
+ }
+
+ body {
+ font-family: "Inter", sans-serif;
+ font-optical-sizing: auto;
+ font-style: normal;
}
}
-body {
- color: var(--foreground);
- background: var(--background);
- font-family: Arial, Helvetica, sans-serif;
+.font-thin {
+ font-weight: 100;
+}
+
+.font-extralight {
+ font-weight: 200;
+}
+
+.font-light {
+ font-weight: 300;
+}
+
+.font-normal {
+ font-weight: 400;
+}
+
+.font-medium {
+ font-weight: 500;
+}
+
+.font-semibold {
+ font-weight: 600;
+}
+
+.font-bold {
+ font-weight: 700;
+}
+
+.font-extrabold {
+ font-weight: 800;
+}
+
+.font-black {
+ font-weight: 900;
}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index b522c25..de1260a 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,17 +1,19 @@
/** @type {import('tailwindcss').Config} */
export default {
- content: [
+ content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
- extend: {
- colors: {
- background: "var(--background)",
- foreground: "var(--foreground)",
- },
- },
+ extend: {
+ fontFamily: {
+ sans: ["Inter", "sans-serif"],
+ },
+ colors: {
+ accent: "#7afbaf",
+ },
+ }
},
plugins: [],
};
+
+
+ 
+
+
+ Codex Metrics
+
+
+
+
+ {/* Top Section: Stats + Graph */}
+
+ )}
+ {/* Left Column - Stats Cards */}
+
+
+
+ {componentLoading.metrics ? (
+
+
+
+ {/* Bottom Section: Version Distribution + Active Peers */}
+
+ {[
+ {
+ title: "Active Nodes",
+ value: currentActiveNodes,
+ Icon: Users,
+ delay: 0,
+ isLoading: componentLoading.nodes,
+ },
+ {
+ title: "Average Peer Count",
+ value: averagePeerCount,
+ Icon: Network,
+ delay: 0.1,
+ isLoading: componentLoading.nodes,
+ },
+ {
+ title: "Total Nodes",
+ value: totalNodes,
+ Icon: Database,
+ delay: 0.2,
+ isLoading: componentLoading.metrics,
+ },
+ {
+ title: "Last Updated",
+ value: lastUpdated,
+ Icon: Clock,
+ delay: 0.3,
+ isLoading: componentLoading.nodes,
+ },
+ ].map((stat) => (
+
+
+
+
+ ))}
+
+
+ {/* Right Column - Chart */}
+
+
+
+ {stat.isLoading ? (
+
+ ) : stat.title === "Last Updated" ? (
+
+
+
+ {lastUpdated.time}
+
+
+ {lastUpdated.dateText}
+
+
+ ) : (
+ + {stat.value} +
+ )} +
+
+ {componentLoading.metrics ? (
+
+
+ ) : metrics.length === 0 ? (
+
+
+ ) : (
+ No data available for the selected timeframe
+
+
+
+ format(new Date(date), "MMM d")}
+ fontSize={12}
+ tickMargin={10}
+ />
+
+
+
+ )}
+
+ {/* Version Distribution */}
+
+
+
+ {componentLoading.versions ? (
+
+
+ {/* Active Peer IDs List */}
+
+
+
+
+
+ {componentLoading.versions ? (
+
+
+ ) : (
+ <>
+ No version data available
+
+ {paginatedVersions.map(([version, count]) => (
+
+
+
+ ))}
+
+ {version}
+
+ {count}
+
+
+
+
+
+
+
+
+ {componentLoading.peers ? (
+
+
+
+ setSearchQuery(e.target.value)}
+ className="w-full bg-neutral-800 border border-neutral-700 rounded-lg px-4 py-2
+ text-sm placeholder-neutral-500 focus:border-[#7afbaf] focus:ring-1
+ focus:ring-[#7afbaf] transition-colors outline-none"
+ />
+
+
+
+ ) : isSearching ? (
+ No active peers available
+
+
+ ) : searchQuery && searchResults.length === 0 ? (
+
+
+ ) : (
+ <>
+ No matching peer IDs found
+
+ {paginatedPeerIds.map((peerId, index) => (
+
+ {peerId}
+
+ ))}
+
+