Fix errors

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

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>

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>
   );