✨ add copy result button

dxanh97 · Oct 30, 2024 · 86ef7fa · 86ef7fa
1 parent b7ac3c6
commit 86ef7fa
Showing 1 changed file with 24 additions and 1 deletion.
diff --git a/src/components/Leaderboard.tsx b/src/components/Leaderboard.tsx
@@ -4,14 +4,15 @@ import {
   Box,
   Button,
   Card,
+  CopyButton,
   Group,
   Indicator,
   ScrollArea,
   Stack,
   Text,
 } from '@mantine/core';
 import { Sparkline } from '@mantine/charts';
-import { IconTableExport } from '@tabler/icons-react';
+import { IconClipboardCopy, IconTableExport } from '@tabler/icons-react';
 
 import { useAppSelector } from '../redux/store';
 import { selectAllRoundsFromGameId } from '../redux/round.selector';
@@ -165,11 +166,33 @@ function Leaderboard(props: Props) {
           </Card>
         ))}
 
+        <CopyButton
+          value={list
+            .map((x) => `${x.name}: ${formatNumber(x.stat)}`)
+            .map((s) => `${s}\n`)
+            .join('')}
+        >
+          {({ copied, copy }) => (
+            <Button
+              fullWidth
+              variant="light"
+              leftSection={<IconClipboardCopy size={14} />}
+              color={copied ? 'teal' : 'blue'}
+              onClick={copy}
+              mt="sm"
+            >
+              {copied
+                ? 'Copy rồi nhé, paste vô group chat đi'
+                : 'Copy tổng kết'}
+            </Button>
+          )}
+        </CopyButton>
         <Button
           fullWidth
           variant="light"
           leftSection={<IconTableExport size={14} />}
           onClick={exportCSV}
+          mt="sm"
         >
           Xuất CSV
         </Button>