From 51f28b5936682931cd28d44524d9b6e290578ec6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 26 Aug 2024 21:18:07 -0500
Subject: [PATCH] feat: copy to clipbioard screenshot

---
 .../components/Model/components/Options.tsx   | 63 +++++++++++++++----
 src/app/tools/tankopedia/[id]/layout.tsx      |  2 +-
 2 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
index 2f098a7bb..709e665f6 100644
--- a/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
+++ b/src/app/tools/tankopedia/[id]/components/Model/components/Options.tsx
@@ -1,5 +1,7 @@
 import {
   CameraIcon,
+  CopyIcon,
+  DownloadIcon,
   EnterFullScreenIcon,
   ExitFullScreenIcon,
   EyeOpenIcon,
@@ -303,21 +305,56 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
       )}
 
       <Box position="absolute" top="3" right="3">
-        <IconButton
-          size={{ initial: '2', sm: '3' }}
-          variant="soft"
-          onClick={() => {
-            if (!canvas.current) return;
+        <Popover.Root>
+          <Popover.Trigger>
+            <IconButton size={{ initial: '2', sm: '3' }} variant="soft">
+              <CameraIcon />
+            </IconButton>
+          </Popover.Trigger>
 
-            const anchor = document.createElement('a');
+          <Popover.Content>
+            <Flex direction="column" gap="2">
+              <Popover.Close>
+                <Button
+                  onClick={() => {
+                    if (!canvas.current) return;
 
-            anchor.setAttribute('download', `${protagonist.name}.png`);
-            anchor.setAttribute('href', canvas.current.toDataURL('image/png'));
-            anchor.click();
-          }}
-        >
-          <CameraIcon />
-        </IconButton>
+                    const anchor = document.createElement('a');
+
+                    anchor.setAttribute('download', `${protagonist.name}.png`);
+                    anchor.setAttribute(
+                      'href',
+                      canvas.current.toDataURL('image/png'),
+                    );
+                    anchor.click();
+                  }}
+                >
+                  <DownloadIcon />
+                  Download
+                </Button>
+              </Popover.Close>
+              <Popover.Close>
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    if (!canvas.current) return;
+
+                    canvas.current.toBlob((blob) => {
+                      if (!blob) return;
+
+                      navigator.clipboard.write([
+                        new ClipboardItem({ 'image/png': blob }),
+                      ]);
+                    });
+                  }}
+                >
+                  <CopyIcon />
+                  Copy
+                </Button>
+              </Popover.Close>
+            </Flex>
+          </Popover.Content>
+        </Popover.Root>
       </Box>
 
       <Flex
diff --git a/src/app/tools/tankopedia/[id]/layout.tsx b/src/app/tools/tankopedia/[id]/layout.tsx
index d4d7e7542..7be08f24b 100644
--- a/src/app/tools/tankopedia/[id]/layout.tsx
+++ b/src/app/tools/tankopedia/[id]/layout.tsx
@@ -24,7 +24,7 @@ export default async function Layout({
   const title = `${tank.name} - Tier ${TIER_ROMAN_NUMERALS[tank.tier]} ${
     (strings.common.nations_adjectives as Record<string, string>)[tank.nation]
   } ${strings.common.tank_class_short[tank.class]}`;
-  const description = `Statistics, armor, and equipment for ${tank.name} in World of Tanks Blitz | WoTB`;
+  const description = `Statistics, armor, and equipment for ${tank.name} in World of Tanks Blitz (WoTB)`;
 
   return (
     <TankopediaEphemeral.Provider data={tankModelDefinition}>