ourworld_web/www_mycelium_cloud2
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
sasha-astiadi
2025-09-17 14:58:10 +02:00
parent bde7d37305
commit 4b5c30c11e
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/CountUpNumber.tsx Normal file
View File

@@ -0,0 +1,18 @@
'use client'
import CountUp from 'react-countup'
import { H2 } from './Texts'
interface CountUpNumberProps {
end: number
className?: string
color?: 'light' | 'primary' | 'secondary' | 'custom'
}
export function CountUpNumber({ end, className, color }: CountUpNumberProps) {
return (
<H2 color={color} className={className}>
<CountUp end={end} duration={2.75} separator="," />
</H2>
)
}

9
src/components/WorldMap.tsx
View File

@@ -3,6 +3,7 @@
import { Globe } from "@/components/ui/globe"
import { motion } from "framer-motion"
import { H2, P, CT, CP } from "./Texts"
import { CountUpNumber } from './CountUpNumber'
export function WorldMap() {
return (
@@ -45,7 +46,7 @@ export function WorldMap() {
<div className="relative flex-1">
<motion.div className="absolute top-12 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<CT color="light" className="uppercase tracking-wide">CORES</CT>
<H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
<CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
<CP color="light" className="mt-2 text-sm">
Total Central Processing Unit Cores available on the grid.
</CP>
@@ -53,7 +54,7 @@ export function WorldMap() {
<motion.div className="absolute -top-10 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<CT color="light" className="uppercase tracking-wide">NODES</CT>
<H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
<CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
<CP color="light" className="mt-2 text-sm">
Total number of nodes on the grid.
</CP>
@@ -61,7 +62,7 @@ export function WorldMap() {
<motion.div className="absolute bottom-28 -left-12 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<CT color="light" className="uppercase tracking-wide">SSD CAPACITY</CT>
<H2 color="light" className="mt-2 text-3xl font-bold">54,958</H2>
<CountUpNumber end={54958} color="light" className="mt-2 text-3xl font-bold" />
<CP color="light" className="mt-2 text-sm">
Total amount of storage (SSD, HDD, & RAM) on the grid.
</CP>
@@ -69,7 +70,7 @@ export function WorldMap() {
<motion.div className="absolute top-44 right-0 rounded-2xl bg-white/5 backdrop-blur-md border border-white/10 px-4 py-8 shadow-md w-80">
<CT color="light" className="uppercase tracking-wide">COUNTRIES</CT>
<H2 color="light" className="mt-2 text-3xl font-bold">51</H2>
<CountUpNumber end={51} color="light" className="mt-2 text-3xl font-bold" />
<CP color="light" className="mt-2 text-sm">
Total number of countries with active nodes.
</CP>