Merge pull request #322 from zhang-accounting/refact/segment-control-…

…for-document-list refact: use segment control for document list layout switcher
zhang-accounting · May 13, 2024 · f106ab9 · f106ab9
2 parents 4308d0e + 16e16cd
commit f106ab9
Showing 1 changed file with 2 additions and 10 deletions.
diff --git a/frontend/src/pages/Documents.tsx b/frontend/src/pages/Documents.tsx
@@ -1,7 +1,6 @@
-import { Button, Container, Group, SimpleGrid, Table, Title } from '@mantine/core';
+import { Container, Group, SegmentedControl, SimpleGrid, Table, Title } from '@mantine/core';
 import { useDocumentTitle, useLocalStorage } from '@mantine/hooks';
 import { openContextModal } from '@mantine/modals';
-import { IconLayout2, IconListDetails } from '@tabler/icons';
 import { format } from 'date-fns';
 import useSWR from 'swr';
 import AccountDocumentLine from '../components/documentLines/AccountDocumentLine';
@@ -47,14 +46,7 @@ export default function Documents() {
     <Container fluid>
       <Group position="apart">
         <Heading title={`${documents.length} Documents`}></Heading>
-        <Button.Group>
-          <Button disabled={layout === 'Grid'} leftIcon={<IconLayout2 size={14} />} variant="default" onClick={() => setLayout('Grid')}>
-            Grid
-          </Button>
-          <Button disabled={layout === 'Table'} leftIcon={<IconListDetails size={14} />} variant="default" onClick={() => setLayout('Table')}>
-            Table
-          </Button>
-        </Button.Group>
+        <SegmentedControl value={layout} onChange={setLayout} data={['Grid', 'Table']} />
       </Group>
 
       {layout === 'Grid' ? (