-
+
+
{stat.title}
{stat.isLoading ? (
-
+
) : stat.title === "Last Updated" ? (
-
-
+
+
{lastUpdated.time}
-
+
{lastUpdated.dateText}
) : (
-
+
{stat.value}
)}
@@ -530,7 +548,7 @@ export default function Dashboard() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.4 }}
- className="bg-neutral-900 p-4 sm:p-6 rounded-xl h-[350px] lg:h-[450px] border border-neutral-800
+ className="bg-neutral-900/30 backdrop-blur-sm p-3 sm:p-6 rounded-xl h-[300px] sm:h-[350px] lg:h-[450px] border border-neutral-800/50
hover:border-neutral-700 transition-colors"
>
@@ -615,17 +633,17 @@ export default function Dashboard() {
{/* Bottom Section: Version Distribution + Active Peers */}
-
+
{/* Version Distribution */}
-
-
+
+
Version Distribution
{componentLoading.versions ? (
@@ -636,22 +654,22 @@ export default function Dashboard() {
) : (
<>
-
{paginatedVersions.map(([version, count]) => (
-
- {version}
-
+
+ {version}
+
{count}
-
+
@@ -661,7 +679,7 @@ export default function Dashboard() {
currentPage={versionPage}
totalPages={totalVersionPages}
onPageChange={setVersionPage}
- className="mt-4 pt-4 border-t border-neutral-800"
+ className="mt-3 pt-3 sm:mt-4 sm:pt-4 border-t border-neutral-800"
/>
>
)}
@@ -672,24 +690,24 @@ export default function Dashboard() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.6 }}
- className="bg-neutral-900 p-4 sm:p-6 rounded-xl border border-neutral-800
- hover:border-neutral-700 transition-colors h-[300px] lg:h-[350px] flex flex-col"
+ className="bg-neutral-900/30 backdrop-blur-sm p-3 sm:p-6 rounded-xl border border-neutral-800/50
+ hover:border-neutral-700 transition-colors min-h-[250px] sm:h-[300px] lg:h-[350px] flex flex-col"
>
-
-
+
+
Active Node IDs
-
-
+
+
setSearchQuery(e.target.value)}
placeholder="Search node IDs..."
- className="pl-9 pr-4 py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-sm
+ className="w-full sm:w-[200px] pl-7 sm:pl-9 pr-3 sm:pr-4 py-1.5 sm:py-2 bg-neutral-800 border border-neutral-700 rounded-lg text-xs sm:text-sm
placeholder:text-neutral-500 focus:border-[#7afbaf] focus:ring-1 focus:ring-[#7afbaf]
- transition-colors outline-none w-[200px]"
+ transition-colors outline-none"
/>
@@ -711,16 +729,16 @@ export default function Dashboard() {
+
{stat.value}
)} @@ -530,7 +548,7 @@ export default function Dashboard() { initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.4 }} - className="bg-neutral-900 p-4 sm:p-6 rounded-xl h-[350px] lg:h-[450px] border border-neutral-800 + className="bg-neutral-900/30 backdrop-blur-sm p-3 sm:p-6 rounded-xl h-[300px] sm:h-[350px] lg:h-[450px] border border-neutral-800/50 hover:border-neutral-700 transition-colors" >
+