Skip to content

Commit d6d4cc8

Browse files
carletexcarletex
authored
Stats sorting (#17)
1 parent 4f3ae0f commit d6d4cc8

File tree

2 files changed

+49
-35
lines changed

2 files changed

+49
-35
lines changed

‎packages/nextjs/app/faqs/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export default function FaqsPage() {
6767
<dd className="mt-2 text-base/7 text-gray-200">
6868
{faq.answer}{" "}
6969
{faq.link && (
70-
<a className="text-primary link" href={faq.link} target="_blank">
70+
<a className="text-primary link break-all lg:break-normal" href={faq.link} target="_blank">
7171
{faq.link}
7272
</a>
7373
)}

‎packages/nextjs/app/stats/page.tsx‎

Lines changed: 48 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,16 @@ import type { NextPage } from "next";
66
const thStyles = "whitespace-nowrap px-3 py-3.5";
77
const tdStyles = "whitespace-nowrap px-3 py-4";
88

9+
type ChallengeStat = {
10+
challenge: number;
11+
count: number;
12+
};
13+
14+
type UserStat = {
15+
challengesCount: number;
16+
count: number;
17+
};
18+
919
const Stats: NextPage = () => {
1020
const {
1121
isPending,
@@ -37,17 +47,25 @@ const Stats: NextPage = () => {
3747
<div className="py-12 px-6 md:py-20">
3848
<div className="max-w-7xl mx-auto">
3949
<div className="text-white">
40-
<h1 className="text-center font-pressStart tracking-wide leading-relaxed md:text-2xl">Users</h1>
50+
<h2 className="text-center font-pressStart tracking-wide leading-relaxed md:text-2xl">Flags</h2>
4151
<div className="mt-10 max-w-3xl mx-auto">
42-
<dl className="grid grid-cols-1 gap-0.5 overflow-hidden border border-gray-800 rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-2">
52+
<dl className="grid grid-cols-1 gap-0.5 overflow-hidden border border-gray-800 rounded-2xl text-center sm:grid-cols-3 lg:grid-cols-3">
4353
<div className="flex flex-col bg-gray-950 p-8">
44-
<dt className="text-sm/6 font-semibold text-gray-300">Total Users</dt>
45-
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">{stats.users.total}</dd>
54+
<dt className="text-sm/6 font-semibold text-gray-300">Total Minted</dt>
55+
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
56+
{stats.challenges.total}
57+
</dd>
4658
</div>
4759
<div className="flex flex-col bg-gray-950 p-8">
4860
<dt className="text-sm/6 font-semibold text-gray-300">Last Month</dt>
4961
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
50-
{stats.users.lastMonth}
62+
{stats.challenges.lastMonth}
63+
</dd>
64+
</div>
65+
<div className="flex flex-col bg-gray-950 p-8">
66+
<dt className="text-sm/6 font-semibold text-gray-300">Avg per user</dt>
67+
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
68+
{stats.users.total > 0 ? (stats.challenges.total / stats.users.total).toFixed(2) : 0}
5169
</dd>
5270
</div>
5371
</dl>
@@ -56,44 +74,38 @@ const Stats: NextPage = () => {
5674
<thead className="bg-green-600/30 font-dotGothic tracking-wide text-left text-gray-50 md:text-xl">
5775
<tr>
5876
<th scope="col" className={thStyles}>
59-
Flags
77+
Flag
6078
</th>
6179
<th scope="col" className={thStyles}>
62-
Users
80+
Total Minted
6381
</th>
6482
</tr>
6583
</thead>
6684
<tbody className="divide-y divide-gray-700 bg-base-100 md:text-xl">
67-
{stats.users.stats.map((stat: { challengesCount: number; count: number }) => (
68-
<tr key={stat.challengesCount}>
69-
<td className={tdStyles}>{stat.challengesCount}</td>
70-
<td className={tdStyles}>{stat.count}</td>
71-
</tr>
72-
))}
85+
{stats.challenges.stats
86+
.sort((a: ChallengeStat, b: ChallengeStat) => a.challenge - b.challenge)
87+
.map((stat: ChallengeStat) => (
88+
<tr key={stat.challenge}>
89+
<td className={tdStyles}>#{stat.challenge}</td>
90+
<td className={tdStyles}>{stat.count}</td>
91+
</tr>
92+
))}
7393
</tbody>
7494
</table>
7595
</div>
7696
</div>
7797

78-
<h2 className="mt-24 text-center font-pressStart tracking-wide leading-relaxed md:text-2xl">Flags</h2>
98+
<h2 className="mt-24 text-center font-pressStart tracking-wide leading-relaxed md:text-2xl">Users</h2>
7999
<div className="mt-10 max-w-3xl mx-auto">
80-
<dl className="grid grid-cols-1 gap-0.5 overflow-hidden border border-gray-800 rounded-2xl text-center sm:grid-cols-3 lg:grid-cols-3">
100+
<dl className="grid grid-cols-1 gap-0.5 overflow-hidden border border-gray-800 rounded-2xl text-center sm:grid-cols-2 lg:grid-cols-2">
81101
<div className="flex flex-col bg-gray-950 p-8">
82-
<dt className="text-sm/6 font-semibold text-gray-300">Total Minted</dt>
83-
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
84-
{stats.challenges.total}
85-
</dd>
102+
<dt className="text-sm/6 font-semibold text-gray-300">Total Users</dt>
103+
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">{stats.users.total}</dd>
86104
</div>
87105
<div className="flex flex-col bg-gray-950 p-8">
88106
<dt className="text-sm/6 font-semibold text-gray-300">Last Month</dt>
89107
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
90-
{stats.challenges.lastMonth}
91-
</dd>
92-
</div>
93-
<div className="flex flex-col bg-gray-950 p-8">
94-
<dt className="text-sm/6 font-semibold text-gray-300">Avg per user</dt>
95-
<dd className="order-first text-xl text-white font-pressStart leading-relaxed">
96-
{stats.users.total > 0 ? (stats.challenges.total / stats.users.total).toFixed(2) : 0}
108+
{stats.users.lastMonth}
97109
</dd>
98110
</div>
99111
</dl>
@@ -102,20 +114,22 @@ const Stats: NextPage = () => {
102114
<thead className="bg-green-600/30 font-dotGothic tracking-wide text-left text-gray-50 md:text-xl">
103115
<tr>
104116
<th scope="col" className={thStyles}>
105-
Flag
117+
Flags captured
106118
</th>
107119
<th scope="col" className={thStyles}>
108-
Minted
120+
Users
109121
</th>
110122
</tr>
111123
</thead>
112124
<tbody className="divide-y divide-gray-700 bg-base-100 md:text-xl">
113-
{stats.challenges.stats.map((stat: { challenge: number; count: number }) => (
114-
<tr key={stat.challenge}>
115-
<td className={tdStyles}>{stat.challenge}</td>
116-
<td className={tdStyles}>{stat.count}</td>
117-
</tr>
118-
))}
125+
{stats.users.stats
126+
.sort((a: UserStat, b: UserStat) => a.challengesCount - b.challengesCount)
127+
.map((stat: UserStat) => (
128+
<tr key={stat.challengesCount}>
129+
<td className={tdStyles}>{stat.challengesCount}</td>
130+
<td className={tdStyles}>{stat.count}</td>
131+
</tr>
132+
))}
119133
</tbody>
120134
</table>
121135
</div>

0 commit comments

Comments
 (0)