style : enhance game loading and choosing UI (#43)

src/sections/loadGame/gamePgnInput.tsx

@@ -1,4 +1,6 @@
-import { FormControl, TextField } from "@mui/material";
+import { FormControl, TextField, Button } from "@mui/material";
+import { Icon } from "@iconify/react";
+import React from "react";
 
 interface Props {
   pgn: string;
@@ -6,6 +8,20 @@ interface Props {
 }
 
 export default function GamePgnInput({ pgn, setPgn }: Props) {
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        const fileContent = e.target?.result as string;
+        setPgn(fileContent);
+      };
+
+      reader.readAsText(file); // Read the file as text
+    }
+  };
+
   return (
     <FormControl fullWidth>
       <TextField
@@ -14,7 +30,22 @@ export default function GamePgnInput({ pgn, setPgn }: Props) {
         multiline
         value={pgn}
         onChange={(e) => setPgn(e.target.value)}
+        rows={8}
+        sx={{ mb: 2 }}
       />
+      <Button
+        variant="contained"
+        component="label"
+        startIcon={<Icon icon="material-symbols:upload" />}
+      >
+        Choose PGN File
+        <input
+          type="file"
+          hidden // Hide the default file input
+          accept=".pgn" // Only allow .pgn files
+          onChange={handleFileChange}
+        />
+      </Button>
     </FormControl>
   );
 }