Improved osu ranking list

pages/users/osu.pixy

@@ -0,0 +1,21 @@
+component OsuRankingList(users []*arn.User)
+	h1.page-title osu! ranking list
+
+	UsersTabs
+
+	table.osu-ranking-list
+		thead
+			tr
+				th #
+				th Player
+				th.osu-ranking-pp Performance
+				th.osu-ranking-accuracy Accuracy
+		tbody
+			for index, user := range users
+				tr.osu-ranking.mountable
+					td= toString(index + 1) + "."
+					td
+						Avatar(user)
+					td.osu-ranking-pp= toString(int(user.Accounts.Osu.PP + 0.5)) + " pp"
+					td.osu-ranking-accuracy= fmt.Sprintf("%.1f", user.Accounts.Osu.Accuracy) + "%"
+				

pages/users/osu.scarlet

@@ -0,0 +1,12 @@
+.osu-ranking-list
+	max-width 400px
+
+.osu-ranking
+	width 100%
+
+	td
+		vertical-align middle
+
+.osu-ranking-pp,
+.osu-ranking-accuracy
+	text-align right

pages/users/users.go

@@ -27,7 +27,11 @@ func Osu(ctx *aero.Context) string {
 		return ctx.Error(http.StatusInternalServerError, "Could not fetch user data", err)
 	}
 
-	return ctx.HTML(components.Users(users))
+	if len(users) > 50 {
+		users = users[:50]
+	}
+
+	return ctx.HTML(components.OsuRankingList(users))
 }
 
 // Staff ...

pages/users/users.pixy

@@ -1,24 +1,16 @@
 component Users(users []*arn.User)
 	h1.page-title Users
 
-	.tabs
+	UsersTabs
-		a.tab.action(href="/users", data-action="diff", data-trigger="click")
-			Icon("users")
-			span.tab-text Active
-
-		a.tab.action(href="/users/anime/watching", data-action="diff", data-trigger="click")
-			Icon("tv")
-			span.tab-text Watching
-
-		a.tab.action(href="/users/osu", data-action="diff", data-trigger="click")
-			Icon("gamepad")
-			span.tab-text Osu
-
-		a.tab.action(href="/users/staff", data-action="diff", data-trigger="click")
-			Icon("user-secret")
-			span.tab-text Staff
 
 	.user-avatars
 		each user in users
 			.mountable
 				Avatar(user)
+
+component UsersTabs
+	.tabs
+		Tab("Active", "users", "/users")
+		Tab("Watching", "tv", "/users/anime/watching")
+		Tab("Osu", "gamepad", "/users/osu")
+		Tab("Staff", "user-secret", "/users/staff")