From 44b7a5a59ab9616eeb89f26e4e0d6bfb453e8baf Mon Sep 17 00:00:00 2001
From: kidw0124 <38641848+kidw0124@users.noreply.github.com>
Date: Tue, 6 Aug 2024 20:26:44 +0900
Subject: [PATCH] Fix errors

---
 .../[qid]/statements/EditStatement.tsx        | 33 +++++++++++++++++--
 .../[qid]/statements/StatementNavbar.tsx      |  1 +
 src/app/problems/[qid]/statements/page.tsx    |  7 +++-
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/src/app/problems/[qid]/statements/EditStatement.tsx b/src/app/problems/[qid]/statements/EditStatement.tsx
index ec4efc3..90a6fe7 100644
--- a/src/app/problems/[qid]/statements/EditStatement.tsx
+++ b/src/app/problems/[qid]/statements/EditStatement.tsx
@@ -1,13 +1,42 @@
-import { Button, Paper, Stack, TextField } from '@mui/material';
+import {
+  Button,
+  Paper,
+  Stack,
+  TextField,
+  Typography,
+  ButtonGroup,
+} from '@mui/material';
 
 // As same as Polygon, the page link is same for creating new language and editing existed language
 // It can be divided into two pages if needed
 
-export default function EditStatement({ language }: { language: string }) {
+export default function EditStatement({
+  language,
+  languageName,
+}: {
+  language: string;
+  languageName: string;
+}) {
   // have to fetch the statement and tutorial from the server by the language
   return (
     <Paper>
       <Stack direction='column' px={4} py={2} gap={2}>
+        <Stack direction='column'>
+          <Stack direction='row' gap={2} px={2} justifyContent='space-between'>
+            <Typography variant='h6'>
+              Edit {languageName}({language}) Statement
+            </Typography>
+            <ButtonGroup variant='text'>
+              <Button>In LaTex</Button>
+              <Button>In HTML</Button>
+              <Button>In PDF</Button>
+            </ButtonGroup>
+          </Stack>
+          <Typography variant='caption' px={2}>
+            It is recommended to use simple TeX, "Preview in HTML" feature supports only
+            subset of TeX markup
+          </Typography>
+        </Stack>
         <TextField id='prob_name' label='Name' fullWidth />
         <TextField id='legend' label='Legend' rows={10} multiline fullWidth />
         <TextField
diff --git a/src/app/problems/[qid]/statements/StatementNavbar.tsx b/src/app/problems/[qid]/statements/StatementNavbar.tsx
index eaa150f..50d3d7c 100644
--- a/src/app/problems/[qid]/statements/StatementNavbar.tsx
+++ b/src/app/problems/[qid]/statements/StatementNavbar.tsx
@@ -17,6 +17,7 @@ export default function StatementNavbar({
                 label={lang.label}
                 value={lang.value}
                 href={'?language=' + lang.value}
+                key={lang.value}
               />
             ))}
           </Tabs>
diff --git a/src/app/problems/[qid]/statements/page.tsx b/src/app/problems/[qid]/statements/page.tsx
index 8f5d02f..50af18c 100644
--- a/src/app/problems/[qid]/statements/page.tsx
+++ b/src/app/problems/[qid]/statements/page.tsx
@@ -41,7 +41,12 @@ export default function Problem() {
         />
       )}
       {existedLanguageList.find((lang) => lang.value === language) && (
-        <EditStatement language={language} />
+        <EditStatement
+          language={language}
+          languageName={
+            existedLanguageList.find((lang) => lang.value === language)?.label || ''
+          }
+        />
       )}
     </Stack>
   );