Stats Section

1 
2import { Section } from "../../ui/section";
3 
4interface StatItemProps {
5  label?: string;
6  value: string | number;
7  suffix?: string;
8  description?: string;
9}
10 
11interface StatsProps {
12  items?: StatItemProps[] | false;
13  className?: string;
14}
15 
16function formatToThousands(value: number) {
17  return Math.round(value / 100) / 10;
18}
19 
20const DEFAULT_STATS: StatItemProps[] = [
21  {
22    label: "used by",
23    value: formatToThousands(1000),
24    suffix: "k",
25    description: "designers on Figma Community",
26  },
27  {
28    label: "over",
29    value: 1000,
30    description: "clones and forks of the template on GitHub",
31  },
32  {
33    label: "already",
34    value: formatToThousands(1000),
35    suffix: "k",
36    description: "installations with shadcn/ui CLI",
37  },
38  {
39    label: "includes",
40    value: 1000,
41    description: "blocks and sections",
42  },
43];
44 
45export default function Stats({
46  items = DEFAULT_STATS,
47  className,
48}: StatsProps) {
49  return (
50    <Section className={className}>
51      <div className="container mx-auto max-w-[960px]">
52        {items !== false && items.length > 0 && (
53          <div className="grid grid-cols-2 gap-12 sm:grid-cols-4">
54            {items.map((item) => (
55              <div
56                key={`${item.label}-${item.description}`}
57                className="flex flex-col items-start gap-3 text-left"
58              >
59                {item.label && (
60                  <div className="text-muted-foreground text-sm font-semibold">
61                    {item.label}
62                  </div>
63                )}
64                <div className="flex items-baseline gap-2">
65                  <div className="from-foreground to-foreground dark:to-brand bg-linear-to-r bg-clip-text text-4xl font-medium text-transparent drop-shadow-[2px_1px_24px_var(--brand-foreground)] transition-all duration-300 sm:text-5xl md:text-6xl">
66                    {item.value}
67                  </div>
68                  {item.suffix && (
69                    <div className="text-brand text-2xl font-semibold">
70                      {item.suffix}
71                    </div>
72                  )}
73                </div>
74                {item.description && (
75                  <div className="text-muted-foreground text-sm font-semibold text-pretty">
76                    {item.description}
77                  </div>
78                )}
79              </div>
80            ))}
81          </div>
82        )}
83      </div>
84    </Section>
85  );
86}