53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import { AnimateValue } from '@nx/nx-dev/ui-animations';
|
|
|
|
const statistics = [
|
|
{
|
|
id: 1,
|
|
name: 'use Nx every day',
|
|
value: 2,
|
|
suffix: ' million',
|
|
associative: 'developers',
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'companies use Nx to ship their products',
|
|
value: 50,
|
|
suffix: '%',
|
|
associative: 'of Fortune 500',
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'on NPM every month',
|
|
value: 18,
|
|
suffix: ' million',
|
|
associative: 'downloads',
|
|
},
|
|
];
|
|
|
|
export function Statistics(): JSX.Element {
|
|
return (
|
|
<section id="statistics">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<dl className="grid grid-cols-1 justify-between gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
|
{statistics.map((stat) => (
|
|
<div
|
|
key={stat.id}
|
|
className="mx-auto flex max-w-xs flex-col gap-y-2"
|
|
>
|
|
<dt className="text-base leading-7 text-slate-600 dark:text-slate-400">
|
|
{stat.name}
|
|
</dt>
|
|
<dd className="order-first text-3xl font-semibold tracking-tight text-slate-950 dark:text-white">
|
|
<span className="text-blue-500 dark:text-sky-500">
|
|
<AnimateValue once num={stat.value} suffix={stat.suffix} />
|
|
</span>{' '}
|
|
{stat.associative}
|
|
</dd>
|
|
</div>
|
|
))}
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|