Add translation component in frontend

frontend/src/App.tsx

@@ -15,6 +15,7 @@ import {GameCard} from "./Game/GameCard.ts";
 import {GameCardSet} from "./Collection/GameCardSet.ts";
 import "./App.css"
 import EditGameCard from "./Edit/EditGameCard.tsx";
+import TranslationCard from "./Translation/TranslationCard.tsx";
 
 
 export default function App() {
@@ -158,6 +159,7 @@ export default function App() {
                                element={<EditGameCard allMyGameCards={allMyGameCards}
                                                       allMyCardSets={allMyCardSets}
                                                       loadAllMyGameCards={loadAllMyGameCards}/>}></Route>
+                        <Route path={"translation"} element={<TranslationCard/>}></Route>
                         <Route path={"/record"} element={<GameRecord userInfo={userInfo}/>}></Route>
                         <Route path={"/setting"} element={<Setting userInfo={userInfo} update={update}
                                                                    countCardSets={allMyCardSets}/>}></Route>

frontend/src/Collection/NewGameCard.css

@@ -18,9 +18,16 @@
     margin: 0;
 }
 
+#link-translation {
+    width: 22px;
+    height: 22px;
+    font-weight: 100;
+    align-items: center;
+}
+
 #translate-button {
-    padding-top: 5px;
-    padding-bottom: 12px;
     display: flex;
     justify-content: flex-end;
+    padding-top: 5px;
+    padding-bottom: 12px;
 }

frontend/src/Collection/NewGameCard.tsx

@@ -1,11 +1,12 @@
 import React, {useState} from "react";
 import axios from "axios";
 import {GameCard} from "../Game/GameCard.ts";
-import {Button, Card, CardActions, CardContent, Stack, TextField, Typography} from "@mui/material";
+import {Button, Card, CardActions, CardContent, IconButton, Stack, TextField, Typography} from "@mui/material";
 import TranslateIcon from '@mui/icons-material/Translate';
 import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import DoDisturbOnIcon from '@mui/icons-material/DoDisturbOn';
 import "./NewGameCard.css"
+import {Link} from "react-router-dom";
 
 type Props = {
     onClose: () => void
@@ -54,13 +55,13 @@ export default function NewGameCard(props: Props) {
                         Create new game card
                     </Typography>
                     <div id={"translate-button"}>
-                        <Button  size={"small"} onClick={saveGameCard} sx={{
-                            padding: 0.3,
+                        <IconButton  size={"small"} sx={{
+                            mr: 1,
                             color: "#ffffff",
                             backgroundColor: "#3c7ee8",
                             boxShadow: 0,
                             borderRadius: '10px'
-                        }}><TranslateIcon fontSize={"small"}/></Button>
+                        }}><Link id={"link-translation"} to="/translation"><TranslateIcon fontSize={"small"}/></Link></IconButton>
                     </div>
                     <Typography variant="h5" component="div">
                         <TextField id="title" label="card title?" onInput={inputTitle}/>

frontend/src/Translation/Translation.ts

@@ -0,0 +1,4 @@
+export type Translation = {
+    original: string,
+    japanese: string
+}

frontend/src/Translation/TranslationCard.css

@@ -0,0 +1,14 @@
+.translation {
+    display: flex;
+    flex-direction: column;
+    width: 290px;
+}
+
+.translation-card {
+    width: 290px;
+    margin: 0;
+    background: #FDF6E1;
+    border: 1px;
+    borderColor: "rgba(122,119,119,0.3)";
+    borderRadius: '15px'
+}

frontend/src/Translation/TranslationCard.tsx

@@ -0,0 +1,70 @@
+import axios from "axios";
+import {Translation} from "./Translation.ts";
+import React, {useState} from "react";
+import {Button, Card, CardActions, CardContent, Stack, TextField, Typography} from "@mui/material";
+import DoDisturbOnIcon from "@mui/icons-material/DoDisturbOn";
+import ChangeCircleIcon from '@mui/icons-material/ChangeCircle';
+import "./TranslationCard.css"
+
+export default function TranslationCard() {
+
+    const [translation, setTranslation] = useState<Translation>();
+    const [originalWord, setOriginalWord] = useState<string>("");
+
+    function getTranslation(original: string, language: string) {
+        axios.get<Translation>("/api/translation?original=" + original + "&language=" + language)
+            .then(response => response.data)
+            .then(data => {
+                setTranslation(data)
+            })
+            .catch(console.error)
+    }
+
+    function inputOriginalWord(event: React.ChangeEvent<HTMLInputElement>) {
+        setOriginalWord(event.target.value)
+    }
+
+    function displayTranslation() {
+        getTranslation(originalWord, "EN");
+    }
+
+    return (
+        <>
+            <div>
+                <img width={"150px"} height={"150px"} src={"/logos/translation-logo.png"}
+                     alt={"translation-logo"}/>
+            </div>
+            <div className={"translation"}>
+                <Card className="translation-card" sx={{boxShadow: 0}}>
+                    <CardContent>
+                        <Typography sx={{fontSize: 14}} color="text.secondary" gutterBottom component="div">
+                            Translate into Japanese
+                        </Typography>
+                        <Typography variant="h5" component="div">
+                            <TextField id="original" label="your favorite word?" onInput={inputOriginalWord}/>
+                        </Typography>
+                        <Typography sx={{mb: 1.5}} color="text.secondary" component="div">
+                            Japanese translation: {translation?.japanese}
+                        </Typography>
+                    </CardContent>
+                    <CardActions>
+                        <Stack className={"new-card-edit-stack"} direction="row" paddingBottom={3}>
+                            <Button id={"new-card-button"} onClick={displayTranslation} sx={{
+                                m: 5,
+                                color: "#508356",
+                                boxShadow: 0,
+                                borderRadius: '15px'
+                            }}><ChangeCircleIcon/></Button>
+                            <Button id={"new-card-button"} sx={{
+                                m: 5,
+                                color: "#D05F5F",
+                                boxShadow: 0,
+                                borderRadius: '15px'
+                            }}><DoDisturbOnIcon/></Button>
+                        </Stack>
+                    </CardActions>
+                </Card>
+            </div>
+        </>
+    )
+}