Custom date range select.

src/components/common/FilterButtons.tsx

@@ -1,22 +1,27 @@
-import { Key } from 'react';
-import { Text, Row, Button, Flexbox } from '@umami/react-zen';
+import { useState } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@umami/react-zen';
 
 export interface FilterButtonsProps {
-  items: any[];
-  selectedKey?: Key;
-  onSelect: (key: any) => void;
+  items: { id: string; label: string }[];
+  value: string;
+  onChange?: (value: string) => void;
 }
 
-export function FilterButtons({ items, selectedKey, onSelect }: FilterButtonsProps) {
+export function FilterButtons({ items, value, onChange }: FilterButtonsProps) {
+  const [selected, setSelected] = useState(value);
+
+  const handleChange = (value: string) => {
+    setSelected(value);
+    onChange?.(value);
+  };
+
   return (
-    <Flexbox justifyContent="center">
-      <Row>
-        {items.map(({ key, label }) => (
-          <Button key={key} onPress={() => onSelect(key)}>
-            <Text weight={key === selectedKey ? 'bold' : undefined}>{label}</Text>
-          </Button>
-        ))}
-      </Row>
-    </Flexbox>
+    <ToggleGroup value={[selected]} onChange={e => handleChange(e[0])}>
+      {items.map(({ id, label }) => (
+        <ToggleGroupItem key={id} id={id}>
+          {label}
+        </ToggleGroupItem>
+      ))}
+    </ToggleGroup>
   );
 }