watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-07 22:27:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Website header updates.

Browse source
This commit is contained in:
Mike Cao 2025-04-04 23:26:52 -07:00
parent 2b99274895
commit 96c2c32d14
26 changed files with 137 additions and 247 deletions
Download patch file Download diff file Expand all files Collapse all files

28
src/components/input/MonthSelect.tsx
View file

@ -1,17 +1,15 @@
import { useRef } from 'react';
import { Row, Text, Icon, Button, MenuTrigger, Popover, Menu, MenuItem } from '@umami/react-zen';
import { startOfMonth, endOfMonth, startOfYear, addMonths, subYears } from 'date-fns';
import { Icons } from '@/components/icons';
import { useLocale } from '@/components/hooks';
import { formatDate } from '@/lib/date';
import styles from './MonthSelect.module.css';
export function MonthSelect({ date = new Date(), onChange }) {
const { locale, dateLocale } = useLocale();
const { locale } = useLocale();
const month = formatDate(date, 'MMMM', locale);
const year = date.getFullYear();
const ref = useRef();
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const handleChange = (close: () => void, date: Date) => {
onChange(`range:${startOfMonth(date).getTime()}:${endOfMonth(date).getTime()}`);
close();
@ -30,32 +28,36 @@ export function MonthSelect({ date = new Date(), onChange }) {
return (
<Row>
<MenuTrigger>
<Button className={styles.input} variant="quiet">
<Button variant="quiet">
<Text>{month}</Text>
<Icon size="sm">
<Icons.Chevron />
</Icon>
</Button>
<Popover>
<Menu items={months}>
{month => {
return <MenuItem id={month}>{month.getDay()}</MenuItem>;
}}
<Menu>
{months.map(month => {
return (
<MenuItem key={month.toString()} id={month.toString()}>
{month.getDay()}
</MenuItem>
);
})}
</Menu>
</Popover>
</MenuTrigger>
<MenuTrigger>
<Button className={styles.input} variant="quiet">
<Button variant="quiet">
<Text>{year}</Text>
<Icon size="sm">
<Icons.Chevron />
</Icon>
</Button>
<Popover>
<Menu items={years}>
{year => {
<Menu>
{years.map(year => {
return <MenuItem id={year}>{year}</MenuItem>;
}}
})}
</Menu>
</Popover>
</MenuTrigger>