feat: start of date picker

src/app/tools/player-stats/[id]/page.tsx

@@ -4,6 +4,7 @@ import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
 import { Box, Callout, Flex, Heading, Tabs, Text } from '@radix-ui/themes';
 import { use, useMemo, useState } from 'react';
 import { BkniIndicator } from '../../../../components/BkniIndicator';
+import { DatePicker } from '../../../../components/DatePicker';
 import PageWrapper from '../../../../components/PageWrapper';
 import { getAccountInfo } from '../../../../core/blitz/getAccountInfo';
 import { getClanAccountInfo } from '../../../../core/blitz/getClanAccountInfo';
@@ -22,8 +23,8 @@ export default function Page({ params }: { params: { id: string } }) {
     [id],
   );
   const clanAccountInfo = use(clanAccountInfoPromise);
-  // const bkni = Math.random() * 2 - 1;
-  const bkni = 0.87;
+  const bkni = Math.random() * 2 - 1;
+  // const bkni = 0.87;
   const [period, setPeriod] = useState<'custom' | number>(30);
   const { bkniColor } = parseBkni(bkni);
   const isTracking = false;
@@ -101,6 +102,10 @@ export default function Page({ params }: { params: { id: string } }) {
         </Tabs.Root>
       </PageWrapper>
 
+      <PageWrapper color={bkniColor} noFlex1>
+        <DatePicker />
+      </PageWrapper>
+
       {!isTracking && (
         <Flex flexGrow="1" justify="center" align="center" p="4">
           <Callout.Root color="red" mt="4">

src/components/DatePicker.tsx

@@ -0,0 +1,186 @@
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronUpIcon,
+  ReloadIcon,
+} from '@radix-ui/react-icons';
+import {
+  Button,
+  Card,
+  ChevronDownIcon,
+  Flex,
+  Grid,
+  IconButton,
+  Link,
+  Popover,
+  Text,
+} from '@radix-ui/themes';
+import { times } from 'lodash';
+import { useState } from 'react';
+
+const DAY_TITLES = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const YEAR_OPTIONS = 7;
+
+export function DatePicker() {
+  const initialDate = new Date();
+
+  const [year, setYear] = useState(initialDate.getFullYear());
+  const [month, setMonth] = useState(initialDate.getMonth());
+  const [day, setDay] = useState(initialDate.getDate());
+  const [yearOffset, setYearOffset] = useState(0);
+  const [monthOffset, setMonthOffset] = useState(0);
+  const date = new Date(year + yearOffset, month + monthOffset, day);
+
+  const daysInLastMonth = new Date(year, month + monthOffset, 0).getDate();
+  const daysInMonth = new Date(year, month + monthOffset + 1, 0).getDate();
+  const firstDayOfMonth = new Date(year, month + monthOffset, 1).getDay();
+  const lastDayOfMonth = new Date(
+    year,
+    month + monthOffset,
+    daysInMonth,
+  ).getDay();
+
+  return (
+    <Card
+      style={{
+        width: 'fit-content',
+      }}
+    >
+      <Flex justify="between" mb="2" align="center" py="2">
+        <IconButton
+          size="3"
+          variant="ghost"
+          onClick={() => setMonthOffset((state) => state - 1)}
+          ml="2"
+        >
+          <ChevronLeftIcon />
+        </IconButton>
+
+        <Flex align="center" gap="2">
+          <IconButton
+            size="3"
+            variant="ghost"
+            onClick={() => {
+              setYear(initialDate.getFullYear());
+              setMonth(initialDate.getMonth());
+              setDay(initialDate.getDate());
+              setYearOffset(0);
+              setMonthOffset(0);
+            }}
+          >
+            <ReloadIcon />
+          </IconButton>
+
+          <Flex gap="1">
+            <Text>{date.toLocaleString(undefined, { month: 'long' })} </Text>
+
+            <Popover.Root onOpenChange={() => setYearOffset(0)}>
+              <Popover.Trigger>
+                <Link underline="always" href="#">
+                  {date.getFullYear()}
+                </Link>
+              </Popover.Trigger>
+
+              <Popover.Content side="right" align="center">
+                <Flex direction="column" gap="1">
+                  <IconButton
+                    variant="ghost"
+                    onClick={() => setYearOffset((state) => state + 1)}
+                    mb="2"
+                  >
+                    <ChevronUpIcon />
+                  </IconButton>
+
+                  {times(YEAR_OPTIONS, (index) => {
+                    const thisYear =
+                      year - index + Math.floor(YEAR_OPTIONS / 2) + yearOffset;
+
+                    return (
+                      <Button
+                        variant={year === thisYear ? 'solid' : 'soft'}
+                        radius="large"
+                        onClick={() => setYear(thisYear)}
+                      >
+                        {thisYear}
+                      </Button>
+                    );
+                  })}
+
+                  <IconButton
+                    variant="ghost"
+                    onClick={() => setYearOffset((state) => state - 1)}
+                    mt="2"
+                  >
+                    <ChevronDownIcon />
+                  </IconButton>
+                </Flex>
+              </Popover.Content>
+            </Popover.Root>
+          </Flex>
+        </Flex>
+
+        <IconButton
+          size="3"
+          variant="ghost"
+          onClick={() => setMonthOffset((state) => state + 1)}
+          mr="2"
+        >
+          <ChevronRightIcon />
+        </IconButton>
+      </Flex>
+
+      <Flex mb="1">
+        {times(7, (index) => (
+          <Text
+            style={{
+              flex: 1,
+            }}
+            size="2"
+            align="center"
+            key={index}
+            color="gray"
+          >
+            {DAY_TITLES[index]}
+          </Text>
+        ))}
+      </Flex>
+
+      <Grid columns="7" gap="1" width="fit-content">
+        {times(firstDayOfMonth, (index) => (
+          <IconButton radius="large" key={index} disabled>
+            {daysInLastMonth - firstDayOfMonth + index + 1}
+          </IconButton>
+        ))}
+
+        {times(daysInMonth, (index) => {
+          const selected = index === day - 1 && monthOffset === 0;
+
+          return (
+            <IconButton
+              radius="large"
+              key={index}
+              variant={selected ? 'solid' : 'soft'}
+              onClick={() => {
+                setYear(year + yearOffset);
+                setMonth((month + monthOffset) % 12);
+                setDay(index + 1);
+                setYearOffset(0);
+                setMonthOffset(0);
+              }}
+            >
+              {index + 1}
+            </IconButton>
+          );
+        })}
+
+        {times(6 - lastDayOfMonth, (index) => (
+          <IconButton radius="large" key={index} disabled>
+            {index + 1}
+          </IconButton>
+        ))}
+      </Grid>
+
+      {/* {`${day} ${month} ${year}`} */}
+    </Card>
+  );
+}