t1c.dev
forked from
rocksky.app/rocksky
A decentralized music tracking and discovery platform built on AT Protocol 馃幍
tsiry-sandratraina.com
1import { css } from "@emotion/react";
2import styled from "@emotion/styled";
3import { HeadingSmall, LabelMedium } from "baseui/typography";
4import numeral from "numeral";
5
6const Group = styled.div<{ mb?: number }>`
7 display: flex;
8 flex-direction: row;
9 margin-top: 20px;
10 margin-bottom: 50px;
11 ${({ mb }) =>
12 mb &&
13 css`
14 margin-bottom: ${mb}px;
15 `}
16`;
17
18export type StatsProps = {
19 stats: {
20 scrobbles: number;
21 artists: number;
22 lovedTracks: number;
23 };
24 mb?: number;
25};
26
27function Stats(props: StatsProps) {
28 const { stats, mb } = props;
29 return (
30 <Group mb={mb}>
31 <div className="mr-[20px]">
32 <LabelMedium className="!text-[var(--color-text-muted)]">
33 SCROBBLES
34 </LabelMedium>
35 <HeadingSmall margin={0} className="!text-[var(--color-text)]">
36 {numeral(stats?.scrobbles).format("0,0")}
37 </HeadingSmall>
38 </div>
39 <div className="mr-[20px]">
40 <LabelMedium className="!text-[var(--color-text-muted)]">
41 ARTISTS
42 </LabelMedium>
43 <HeadingSmall margin={0} className="!text-[var(--color-text)]">
44 {numeral(stats?.artists).format("0,0")}
45 </HeadingSmall>
46 </div>
47 <div className="mr-[20px]">
48 <LabelMedium className="!text-[var(--color-text-muted)]">
49 LOVED TRACKS
50 </LabelMedium>
51 <HeadingSmall margin={0} className="!text-[var(--color-text)]">
52 {numeral(stats?.lovedTracks).format("0,0")}
53 </HeadingSmall>
54 </div>
55 </Group>
56 );
57}
58
59export default Stats;