Convert text for internationalization.

components/metrics/QuickButtons.js

@@ -3,18 +3,18 @@ import ButtonGroup from 'components/common/ButtonGroup';
 import { getDateRange } from 'lib/date';
 import styles from './QuickButtons.module.css';
 
-const options = {
-  '24h': '24hour',
-  '7d': '7day',
-  '30d': '30day',
-};
+const options = [
+  { label: '24h', value: '24hour' },
+  { label: '7d', value: '7day' },
+  { label: '30d', value: '30day' },
+];
 
 export default function QuickButtons({ value, onChange }) {
-  const selectedItem = Object.keys(options).find(key => options[key] === value);
+  const selectedItem = options.find(item => item.value === value)?.value;
 
   function handleClick(selected) {
-    if (options[selected] !== value) {
-      onChange(getDateRange(options[selected]));
+    if (selected !== value) {
+      onChange(getDateRange(selected));
     }
   }
 
@@ -22,7 +22,7 @@ export default function QuickButtons({ value, onChange }) {
     <ButtonGroup
       size="xsmall"
       className={styles.buttons}
-      items={Object.keys(options)}
+      items={options}
       selectedItem={selectedItem}
       onClick={handleClick}
     />