implement character backup

README.md

@@ -13,6 +13,7 @@ Features:
 - Track extractor status
   - When the cycle will end
   - Highlight the planet if extractor has stopped or has not been started.
+- Backup to download characters to a file (restore not implemented yet)
 
 ## Security
 

src/app/components/Backup/DowloadButton.tsx

@@ -0,0 +1,17 @@
+import { CharacterContext } from "@/app/context/Context";
+import { Button } from "@mui/material";
+import { useContext } from "react";
+
+export const DowloadButton = () => {
+  const { characters } = useContext(CharacterContext);
+  return (
+    <Button
+      href={`data:text/json;charset=utf-8,${encodeURIComponent(
+        JSON.stringify(characters)
+      )}`}
+      download="pi-avanto-tk-characters.json"
+    >
+      Backup
+    </Button>
+  );
+};

src/app/components/MainGrid.tsx

@@ -4,6 +4,7 @@ import { LoginButton } from "./Login/LoginButton";
 import { AccountCard } from "./Account/AccountCard";
 import { AccessToken } from "@/types";
 import { CharacterContext } from "../context/Context";
+import { DowloadButton } from "./Backup/DowloadButton";
 
 interface Grouped {
   [key: string]: AccessToken[];
@@ -24,6 +25,7 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
         <Grid item xs={2}>
           <Stack direction="row" spacing={1}>
             <LoginButton />
+            <DowloadButton />
           </Stack>
         </Grid>
       </Grid>