clarify time range in statistics

CodeforLeipzig · Oct 30, 2024 · fb73eb4 · fb73eb4
1 parent fbf6dce
commit fb73eb4
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/src/components/Sidebar/SidebarStatistics/index.tsx b/src/components/Sidebar/SidebarStatistics/index.tsx
@@ -2,6 +2,7 @@ import React, { FC } from 'react';
 import styled from 'styled-components';
 
 import SidebarTitle from '../SidebarTitle/';
+import Paragraph from '../../Paragraph';
 import SmallParagraph from '../../SmallParagraph';
 import { useStatisticsJson } from '../../../utils/hooks/useStatisticsJson';
 
@@ -10,18 +11,29 @@ const Wrapper = styled.div`
   margin: 0 0 20px;
 `;
 
+const FlexCol = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 const SidebarStatistics: FC = () => {
   const { data: statisticsJson } = useStatisticsJson();
 
   return (
-    <Wrapper>
+    <>
       <SidebarTitle>Gieß-Ranking 2024</SidebarTitle>
-      {(statisticsJson || []).map(user => (
-        <SmallParagraph>{((user.pos < 10) ? '00' : ((user.pos < 100) ? '0' : '')) + user.pos}. {user.username} ({user.liter} Liter)</SmallParagraph>
-      ))}
-      <br /><br />
-      Mehr Statistiken gibt es <a target="_blank" href="https://joergreichert.github.io/gdk-opendata-plot/">hier</a> und <a target="_blank" href="https://dashboard.codeforleipzig.de/d/RQFRCgeGk/leipziggiesstpublic?orgId=3&from=1709247600000&to=now">hier</a>.
-    </Wrapper>
+      <FlexCol>
+        <Paragraph>
+          vom 01.04.2024 bis 30.09.2024
+        </Paragraph>
+        {(statisticsJson || []).map(user => (
+          <SmallParagraph>{((user.pos < 10) ? '00' : ((user.pos < 100) ? '0' : '')) + user.pos}. {user.username} ({user.liter} Liter)</SmallParagraph>
+        ))}
+        <Paragraph>
+          Mehr Statistiken gibt es <a target="_blank" href="https://joergreichert.github.io/gdk-opendata-plot/">hier</a> und <a target="_blank" href="https://dashboard.codeforleipzig.de/d/RQFRCgeGk/leipziggiesstpublic?orgId=3&from=1709247600000&to=now">hier</a>.
+        </Paragraph>
+      </FlexCol>
+    </>
   );
 };