[portal][ui] add MonthYearPicker

apps/portal/src/components/shared/MonthYearPicker.tsx

@@ -0,0 +1,96 @@
+import { Select } from '@tih/ui';
+
+type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export type MonthYear = Readonly<{
+  month: Month;
+  year: number;
+}>;
+
+type Props = Readonly<{
+  onChange: (value: MonthYear) => void;
+  value: MonthYear;
+}>;
+
+const MONTH_OPTIONS = [
+  {
+    label: 'January',
+    value: 1,
+  },
+  {
+    label: 'February',
+    value: 2,
+  },
+  {
+    label: 'March',
+    value: 3,
+  },
+  {
+    label: 'April',
+    value: 4,
+  },
+  {
+    label: 'May',
+    value: 5,
+  },
+  {
+    label: 'June',
+    value: 6,
+  },
+  {
+    label: 'July',
+    value: 7,
+  },
+  {
+    label: 'August',
+    value: 8,
+  },
+  {
+    label: 'September',
+    value: 9,
+  },
+  {
+    label: 'October',
+    value: 10,
+  },
+  {
+    label: 'November',
+    value: 11,
+  },
+  {
+    label: 'December',
+    value: 12,
+  },
+];
+
+const NUM_YEARS = 5;
+const YEAR_OPTIONS = Array.from({ length: NUM_YEARS }, (_, i) => {
+  const year = new Date().getFullYear() - NUM_YEARS + i + 1;
+  return {
+    label: String(year),
+    value: year,
+  };
+});
+
+export default function MonthYearPicker({ value, onChange }: Props) {
+  return (
+    <div className="flex space-x-4">
+      <Select
+        label="Month"
+        options={MONTH_OPTIONS}
+        value={value.month}
+        onChange={(newMonth) =>
+          onChange({ month: Number(newMonth) as Month, year: value.year })
+        }
+      />
+      <Select
+        label="Year"
+        options={YEAR_OPTIONS}
+        value={value.year}
+        onChange={(newYear) =>
+          onChange({ month: value.month, year: Number(newYear) })
+        }
+      />
+    </div>
+  );
+}

apps/portal/src/pages/index.tsx

@@ -1,11 +1,18 @@
 import { useState } from 'react';
 import type { TypeaheadOption } from '@tih/ui';
+import { HorizontalDivider } from '@tih/ui';
 
-import CompaniesTypeahead from '~/components/global/CompaniesTypeahead';
+import CompaniesTypeahead from '~/components/shared/CompaniesTypeahead';
+import type { MonthYear } from '~/components/shared/MonthYearPicker';
+import MonthYearPicker from '~/components/shared/MonthYearPicker';
 
 export default function HomePage() {
   const [selectedCompany, setSelectedCompany] =
     useState<TypeaheadOption | null>(null);
+  const [monthYear, setMonthYear] = useState<MonthYear>({
+    month: new Date().getMonth() + 1,
+    year: new Date().getFullYear(),
+  });
 
   return (
     <main className="flex-1 overflow-y-auto">
@@ -18,6 +25,8 @@ export default function HomePage() {
             onSelect={(option) => setSelectedCompany(option)}
           />
           <pre>{JSON.stringify(selectedCompany, null, 2)}</pre>
+          <HorizontalDivider />
+          <MonthYearPicker value={monthYear} onChange={setMonthYear} />
         </div>
       </div>
     </main>