Skip to content

Commit faa026b

Browse files
committed
refactor(web): courts-stat
1 parent dae34a1 commit faa026b

File tree

5 files changed

+317
-274
lines changed

5 files changed

+317
-274
lines changed

web/src/pages/Courts/CourtDetails/Stats.tsx

Lines changed: 0 additions & 273 deletions
This file was deleted.
Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import ChartIcon from "svgs/icons/chart.svg";
5+
6+
import { calculateSubtextRender } from "utils/calculateSubtextRender";
7+
import { isUndefined } from "utils/index";
8+
9+
import { CourtDetailsQuery } from "queries/useCourtDetails";
10+
11+
import { responsiveSize } from "styles/responsiveSize";
12+
13+
import StatDisplay from "components/StatDisplay";
14+
import { StyledSkeleton } from "components/StyledSkeleton";
15+
16+
import { stats } from "./stats";
17+
18+
const TimeDisplayContainer = styled.div`
19+
display: flex;
20+
flex-direction: row;
21+
align-items: center;
22+
gap: 8px;
23+
`;
24+
25+
const AllTimeContainer = styled(TimeDisplayContainer)`
26+
padding: ${responsiveSize(12, 16)} 0;
27+
`;
28+
29+
const StyledAllTimeText = styled.p`
30+
color: ${({ theme }) => theme.primaryText};
31+
margin: 0;
32+
font-size: 14px;
33+
`;
34+
35+
const StyledChartIcon = styled(ChartIcon)`
36+
path {
37+
fill: ${({ theme }) => theme.primaryText};
38+
}
39+
`;
40+
41+
const AccordionContainer = styled.div`
42+
display: flex;
43+
flex-direction: column;
44+
gap: 4px;
45+
`;
46+
47+
const StyledCard = styled.div`
48+
display: flex;
49+
flex-wrap: wrap;
50+
gap: 20px 0;
51+
`;
52+
53+
const StatsContent: React.FC<{ court: CourtDetailsQuery["court"]; pricesData: any; coinIds: string[] }> = ({
54+
court,
55+
pricesData,
56+
coinIds,
57+
}) => (
58+
<AccordionContainer>
59+
<div>
60+
<AllTimeContainer>
61+
<StyledChartIcon />
62+
<StyledAllTimeText>Parameters</StyledAllTimeText>
63+
</AllTimeContainer>
64+
<StyledCard>
65+
{stats.slice(0, 3).map(({ title, coinId, getText, getSubtext, color, icon }) => {
66+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
67+
return (
68+
<StatDisplay
69+
key={title}
70+
{...{ title, color, icon }}
71+
text={court ? getText(court) : <StyledSkeleton />}
72+
subtext={calculateSubtextRender(court, getSubtext, coinPrice)}
73+
isSmallDisplay={true}
74+
/>
75+
);
76+
})}
77+
</StyledCard>
78+
</div>
79+
<div>
80+
<AllTimeContainer>
81+
<StyledChartIcon />
82+
<StyledAllTimeText>Activity</StyledAllTimeText>
83+
</AllTimeContainer>
84+
<StyledCard>
85+
{stats.slice(3, 7).map(({ title, coinId, getText, getSubtext, color, icon }) => {
86+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
87+
return (
88+
<StatDisplay
89+
key={title}
90+
{...{ title, color, icon }}
91+
text={court ? getText(court) : <StyledSkeleton />}
92+
subtext={calculateSubtextRender(court, getSubtext, coinPrice)}
93+
isSmallDisplay={true}
94+
/>
95+
);
96+
})}
97+
</StyledCard>
98+
</div>
99+
<div>
100+
<AllTimeContainer>
101+
<StyledChartIcon />
102+
<StyledAllTimeText>Total Rewards</StyledAllTimeText>
103+
</AllTimeContainer>
104+
<StyledCard>
105+
{stats.slice(7, 9).map(({ title, coinId, getText, getSubtext, color, icon }) => {
106+
const coinPrice = !isUndefined(pricesData) ? pricesData[coinIds[coinId!]]?.price : undefined;
107+
return (
108+
<StatDisplay
109+
key={title}
110+
{...{ title, color, icon }}
111+
text={court ? getText(court) : <StyledSkeleton />}
112+
subtext={calculateSubtextRender(court, getSubtext, coinPrice)}
113+
isSmallDisplay={true}
114+
/>
115+
);
116+
})}
117+
</StyledCard>
118+
</div>
119+
</AccordionContainer>
120+
);
121+
122+
export default StatsContent;

0 commit comments

Comments
 (0)