@@ -9,6 +9,11 @@ import { StatisticsApi } from "../lib/api/services/StatisticsApi"
9
9
import { formatNumber } from " ../lib/utils"
10
10
import Timeago from " ../components/Timeago.astro"
11
11
import { LeagueDropdown } from " ../components/widgets/LeagueDropdown"
12
+ import Header from " ../components/layout/Header.astro"
13
+ import Section from " ../components/layout/Section.astro"
14
+ import HeaderMeta from " ../components/layout/HeaderMeta.astro"
15
+ import { formatDateRelative } from " ../lib/format"
16
+ import Main from " ../components/layout/Main.astro"
12
17
13
18
const league = new URLSearchParams (Astro .url .search ).get (" league" )
14
19
const { races, cached_at } = await StatisticsApi .getStatistics ({ league })
@@ -65,70 +70,64 @@ const factions = [
65
70
---
66
71
67
72
<Layout title =" Statistics" >
68
- <div class =" w-full border-b border-gray-700/50 bg-gray-800/50 backdrop-blur-lg" >
69
- <div class =" mx-auto flex max-w-screen-md flex-wrap items-center justify-between gap-4 px-4 py-8 md:px-7" >
70
- <div >
71
- <p class =" font-bold text-gray-500" >Game</p >
72
- <h1 class =" flex-auto text-2xl font-bold text-white" >Statistics</h1 >
73
- </div >
74
- <p class =" text-xs text-gray-500" >
75
- Last updated <Timeago date ={ new Date (cached_at )} />
76
- </p >
73
+ <Header section =" Insights" title =" Statistics" >
74
+ <HeaderMeta
75
+ items ={ [
76
+ {
77
+ icon: import (" lucide-static/icons/clock.svg?raw" ),
78
+ label: ` Last updated ${formatDateRelative (new Date (cached_at ))} ` ,
79
+ },
80
+ ]}
81
+ />
82
+ </Header >
83
+ <Section title =" Factions" class =" !max-w-screen-md" >
84
+ {
85
+ league && (
86
+ <p slot = " header" class = " text-balance text-sm text-gray-500" >
87
+ League stats are based on <em >all matches</em > by players who are currently in the { league } league.
88
+ </p >
89
+ )
90
+ }
91
+ <div slot =" controls" >
92
+ <LeagueDropdown selected ={ league } queryParam =" league" client:idle />
77
93
</div >
78
- </div >
79
- <div class =" mx-auto w-full max-w-screen-md p-4 md:px-7 md:py-8" >
80
- <div class =" flex justify-between py-4" >
81
- <div >
82
- <h2 class =" flex-auto text-2xl font-bold text-white" >Factions</h2 >
83
- <p class =" text-gray-400" >Excludes Mirrors.</p >
94
+ <div >
95
+ <div class =" flex w-full flex-wrap gap-4 sm:flex-nowrap" >
84
96
{
85
- league && (
86
- <p class = " text-balance text-sm text-gray-500" >
87
- League stats are based on <em >all matches</em > by players who are currently in the { league } league.
88
- </p >
89
- )
97
+ factions .map ((faction ) => (
98
+ <div class = " min-w-0 flex-auto rounded-xl border border-gray-800 bg-gray-900 p-4" >
99
+ <h2 class = " mb-4 text-xl font-black" >{ faction .name } </h2 >
100
+ <div class = " flex gap-2 xs:gap-4" >
101
+ <Image src = { faction .icon } alt = " Vanguard" class = " size-12 xs:size-16" />
102
+ <div class = " flex flex-col" >
103
+ <span class = " text-sm font-bold text-gray-300" >Win Rate</span >
104
+ <span
105
+ class :list = { [
106
+ " text-xl xs:text-3xl font-black" ,
107
+ faction .stats .winrate >= 50 ? " text-lime-500" : " text-red-500" ,
108
+ ]}
109
+ >
110
+ { faction .stats .winrate } %
111
+ </span >
112
+ </div >
113
+ <div class = " flex flex-col" >
114
+ <span class = " text-sm font-bold text-gray-300" >Pick Rate</span >
115
+ <span class = " text-xl font-black xs:text-3xl" >{ faction .stats .pickrate } %</span >
116
+ </div >
117
+ </div >
118
+ <WinrateChart data = { faction .stats .history .data } labels = { faction .stats .history .labels } client :idle />
119
+ { /* <WinrateChart data={faction.stats.duration.data} labels={faction.stats.duration.labels} client:idle />*/ }
120
+ <p class = " mt-2 pl-1 text-xs leading-snug text-gray-500" >
121
+ Based on { formatNumber (faction .stats .matches .count ! )} matches in the past 7 days, excl.{ " " }
122
+ { formatNumber (faction .stats .matches .mirrors ! )} mirrors
123
+ </p >
124
+ </div >
125
+ ))
90
126
}
91
127
</div >
92
- <div class =" flex-none " >
93
- <LeagueDropdown selected = { league } queryParam = " league " client:idle / >
128
+ <div class =" mt-4 min-w-0 flex-auto rounded-xl border border-gray-800 bg-gray-900 p-6 " >
129
+ <h2 class = " flex-auto text-center text-2xl font-bold text-gray-600 " >More stats soon</ h2 >
94
130
</div >
95
131
</div >
96
-
97
- <div class =" flex w-full flex-wrap gap-4 sm:flex-nowrap" >
98
- {
99
- factions .map ((faction ) => (
100
- <div class = " min-w-0 flex-auto rounded-xl border border-gray-800 bg-gray-900 p-4" >
101
- <h2 class = " mb-4 text-xl font-black" >{ faction .name } </h2 >
102
- <div class = " flex gap-2 xs:gap-4" >
103
- <Image src = { faction .icon } alt = " Vanguard" class = " size-12 xs:size-16" />
104
- <div class = " flex flex-col" >
105
- <span class = " text-sm font-bold text-gray-300" >Win Rate</span >
106
- <span
107
- class :list = { [
108
- " text-xl xs:text-3xl font-black" ,
109
- faction .stats .winrate >= 50 ? " text-lime-500" : " text-red-500" ,
110
- ]}
111
- >
112
- { faction .stats .winrate } %
113
- </span >
114
- </div >
115
- <div class = " flex flex-col" >
116
- <span class = " text-sm font-bold text-gray-300" >Pick Rate</span >
117
- <span class = " text-xl font-black xs:text-3xl" >{ faction .stats .pickrate } %</span >
118
- </div >
119
- </div >
120
- <WinrateChart data = { faction .stats .history .data } labels = { faction .stats .history .labels } client :idle />
121
- { /* <WinrateChart data={faction.stats.duration.data} labels={faction.stats.duration.labels} client:idle />*/ }
122
- <p class = " mt-2 pl-1 text-xs leading-snug text-gray-500" >
123
- Based on { formatNumber (faction .stats .matches .count ! )} matches in the past 7 days, excl.{ " " }
124
- { formatNumber (faction .stats .matches .mirrors ! )} mirrors
125
- </p >
126
- </div >
127
- ))
128
- }
129
- </div >
130
- <div class =" mt-4 min-w-0 flex-auto rounded-xl border border-gray-800 bg-gray-900 p-6" >
131
- <h2 class =" flex-auto text-center text-2xl font-bold text-gray-600" >More stats soon</h2 >
132
- </div >
133
- </div >
132
+ </Section >
134
133
</Layout >
0 commit comments