use Carousel

src/frontend/src/components/settings/QuickAction.tsx

@@ -1,9 +1,11 @@
 import { Trans, t } from '@lingui/macro';
+import { Carousel } from '@mantine/carousel';
 import {
+  Button,
   Divider,
   Flex,
+  Group,
   Paper,
-  SimpleGrid,
   Stack,
   Text,
   Title
@@ -11,7 +13,48 @@ import {
 import { IconHome } from '@tabler/icons-react';
 
 import { ActionButton } from '../buttons/ActionButton';
-import { PlaceholderPill } from '../items/Placeholder';
+
+interface ActionItem {
+  id: string;
+  title: string;
+  description: string;
+  action: () => void;
+}
+
+function ActionCarousel({ items }: { items: ActionItem[] }) {
+  const slides = items.map((image) => (
+    <Carousel.Slide key={image.id}>
+      <Paper shadow="xs" p="sm" withBorder>
+        <Group>
+          <Stack>
+            <Text>
+              <strong>{image.title}</strong>
+              <br />
+              {image.description}
+            </Text>
+          </Stack>
+          <Button size="sm" variant="light" onClick={image.action}>
+            <Trans>Act</Trans>
+          </Button>
+        </Group>
+      </Paper>
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Carousel
+      height={80}
+      slideSize="40%"
+      align="start"
+      slideGap="md"
+      controlsOffset="xs"
+      controlSize={28}
+      dragFree
+    >
+      {slides}
+    </Carousel>
+  );
+}
 
 export const QuickAction = ({
   navigate,
@@ -20,6 +63,26 @@ export const QuickAction = ({
   navigate?: any;
   ml?: string;
 }) => {
+  const items = [
+    {
+      id: '1',
+      title: 'Add a new group',
+      description: 'Create a new group to manage your users',
+      action: () => console.log('Add a new group')
+    },
+    {
+      id: '2',
+      title: 'Add a new user',
+      description: 'Create a new user to manage your groups',
+      action: () => console.log('Add a new user')
+    },
+    {
+      id: '3',
+      title: 'Add a new role',
+      description: 'Create a new role to manage your permissions',
+      action: () => console.log('Add a new role')
+    }
+  ];
   return (
     <Stack gap={'xs'} ml={ml}>
       <Title order={5}>
@@ -40,21 +103,7 @@ export const QuickAction = ({
             <Divider orientation="vertical" mx="md" />
           </>
         ) : null}
-        <SimpleGrid cols={3}>
+        <ActionCarousel items={items} />
-          <Paper shadow="xs" p="sm" withBorder>
-            <Text>
-              <Trans>Add a new user</Trans>
-            </Text>
-          </Paper>
-
-          <Paper shadow="xs" p="sm" withBorder>
-            <PlaceholderPill />
-          </Paper>
-
-          <Paper shadow="xs" p="sm" withBorder>
-            <PlaceholderPill />
-          </Paper>
-        </SimpleGrid>
       </Flex>
     </Stack>
   );