Initial commit

Created from https://vercel.com/new

components/settings/DateRangeSetting.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import DateFilter from 'components/common/DateFilter';
+import Button from 'components/common/Button';
+import useDateRange from 'hooks/useDateRange';
+import { DEFAULT_DATE_RANGE } from 'lib/constants';
+import { getDateRange } from 'lib/date';
+import styles from './DateRangeSetting.module.css';
+import useLocale from 'hooks/useLocale';
+
+export default function DateRangeSetting() {
+  const { locale } = useLocale();
+  const [dateRange, setDateRange] = useDateRange();
+  const { startDate, endDate, value } = dateRange;
+
+  function handleReset() {
+    setDateRange(getDateRange(DEFAULT_DATE_RANGE, locale));
+  }
+
+  return (
+    <>
+      <DateFilter value={value} startDate={startDate} endDate={endDate} onChange={setDateRange} />
+      <Button className={styles.button} size="small" onClick={handleReset}>
+        <FormattedMessage id="label.reset" defaultMessage="Reset" />
+      </Button>
+    </>
+  );
+}