add copy button in pgn box closes #70

franciscoBSalgueiro · Oct 31, 2023 · 2540bfe · 2540bfe
1 parent 20b5a77
commit 2540bfe
Showing 1 changed file with 53 additions and 7 deletions.
diff --git a/src/components/panels/info/PgnInput.tsx b/src/components/panels/info/PgnInput.tsx
@@ -1,12 +1,24 @@
-import { Checkbox, Group, Stack, Text, Textarea } from "@mantine/core";
+import {
+  ActionIcon,
+  Box,
+  Checkbox,
+  CopyButton,
+  Group,
+  Stack,
+  Text,
+  Textarea,
+  Tooltip,
+  rem,
+} from "@mantine/core";
 import { memo, useMemo } from "react";
 import { getPGN } from "@/utils/chess";
 import { GameHeaders, TreeNode } from "@/utils/treeReducer";
 import { useAtom } from "jotai";
 import { currentPgnOptionsAtom } from "@/atoms/atoms";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
 
 function PgnInput({ root, headers }: { root: TreeNode; headers: GameHeaders }) {
-  const [options, setOptions] = useAtom(currentPgnOptionsAtom)
+  const [options, setOptions] = useAtom(currentPgnOptionsAtom);
 
   const pgn = getPGN(root, {
     headers: headers,
@@ -25,25 +37,33 @@ function PgnInput({ root, headers }: { root: TreeNode; headers: GameHeaders }) {
             label="Comments"
             size="xs"
             checked={options.comments}
-            onChange={() => setOptions({ ...options, comments: !options.comments })}
+            onChange={() =>
+              setOptions({ ...options, comments: !options.comments })
+            }
           />
           <Checkbox
             label="Symbols"
             size="xs"
             checked={options.annotations}
-            onChange={() => setOptions({ ...options, annotations: !options.annotations })}
+            onChange={() =>
+              setOptions({ ...options, annotations: !options.annotations })
+            }
           />
           <Checkbox
             label="Variations"
             size="xs"
             checked={options.variations}
-            onChange={() => setOptions({ ...options, variations: !options.variations })}
+            onChange={() =>
+              setOptions({ ...options, variations: !options.variations })
+            }
           />
           <Checkbox
             label="Special Symbols"
             size="xs"
             checked={options.symbols}
-            onChange={() => setOptions({ ...options, symbols: !options.symbols })}
+            onChange={() =>
+              setOptions({ ...options, symbols: !options.symbols })
+            }
           />
         </Group>
       </>
@@ -52,7 +72,33 @@ function PgnInput({ root, headers }: { root: TreeNode; headers: GameHeaders }) {
   );
 
   const pgnArea = useMemo(
-    () => <Textarea readOnly autosize value={pgn} />,
+    () => (
+      <Box sx={{ position: "relative" }}>
+        <Textarea readOnly autosize value={pgn} />
+        <CopyButton value={pgn} timeout={2000}>
+          {({ copied, copy }) => (
+            <Tooltip
+              label={copied ? "Copied" : "Copy"}
+              withArrow
+              position="right"
+            >
+              <ActionIcon
+                color={copied ? "teal" : "gray"}
+                variant="subtle"
+                onClick={copy}
+                sx={{ position: "absolute", top: 15, right: 15 }}
+              >
+                {copied ? (
+                  <IconCheck style={{ width: rem(16) }} />
+                ) : (
+                  <IconCopy style={{ width: rem(16) }} />
+                )}
+              </ActionIcon>
+            </Tooltip>
+          )}
+        </CopyButton>
+      </Box>
+    ),
     [pgn]
   );