feat: copy to clipbioard screenshot

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"
+        <Popover.Root>
+          <Popover.Trigger>
+            <IconButton size={{ initial: '2', sm: '3' }} variant="soft">
+              <CameraIcon />
+            </IconButton>
+          </Popover.Trigger>
+
+          <Popover.Content>
+            <Flex direction="column" gap="2">
+              <Popover.Close>
+                <Button
                   onClick={() => {
                     if (!canvas.current) return;
 
                     const anchor = document.createElement('a');
 
                     anchor.setAttribute('download', `${protagonist.name}.png`);
-            anchor.setAttribute('href', canvas.current.toDataURL('image/png'));
+                    anchor.setAttribute(
+                      'href',
+                      canvas.current.toDataURL('image/png'),
+                    );
                     anchor.click();
                   }}
                 >
-          <CameraIcon />
-        </IconButton>
+                  <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

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}>