73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
import React, { useState } from "react";
|
|
import ReactDOM from "react-dom/client";
|
|
import CircularProgress from "@mui/material/CircularProgress";
|
|
import Divider from "@mui/material/Divider";
|
|
import ReactMarkdown from "react-markdown";
|
|
import Paper from "@mui/material/Paper";
|
|
import Stack from "@mui/material/Stack";
|
|
import Button from "@mui/material/Button";
|
|
import Link from "@mui/material/Link";
|
|
import { useFetch } from "./hooks/Fetch";
|
|
import { I18N, URL_RAW_PREFIX } from "./config";
|
|
|
|
function App() {
|
|
const [lang, setLang] = useState("zh");
|
|
const [data, loading, error] = useFetch(
|
|
`${URL_RAW_PREFIX}/${I18N?.["about_md"]?.[lang]}`
|
|
);
|
|
return (
|
|
<Paper sx={{ padding: 2, margin: 2 }}>
|
|
<Stack spacing={2} direction="row" justifyContent="flex-end">
|
|
<Button
|
|
variant="text"
|
|
onClick={() => {
|
|
setLang((pre) => (pre === "zh" ? "en" : "zh"));
|
|
}}
|
|
>
|
|
{lang === "zh" ? "ENGLISH" : "中文"}
|
|
</Button>
|
|
</Stack>
|
|
<Divider>
|
|
<Link
|
|
href={process.env.REACT_APP_HOMEPAGE}
|
|
>{`KISS Translator v${process.env.REACT_APP_VERSION}`}</Link>
|
|
</Divider>
|
|
<Stack spacing={2} direction="row" useFlexGap flexWrap="wrap">
|
|
<Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL}>
|
|
Install Userscript 1
|
|
</Link>
|
|
<Link href={process.env.REACT_APP_USERSCRIPT_DOWNLOADURL2}>
|
|
Install Userscript 2
|
|
</Link>
|
|
<Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL}>
|
|
Install Userscript Safari 1
|
|
</Link>
|
|
<Link href={process.env.REACT_APP_USERSCRIPT_IOS_DOWNLOADURL2}>
|
|
Install Userscript Safari 2
|
|
</Link>
|
|
<Link href={process.env.REACT_APP_OPTIONSPAGE}>
|
|
Open Options Page 1
|
|
</Link>
|
|
<Link href={process.env.REACT_APP_OPTIONSPAGE2}>
|
|
Open Options Page 2
|
|
</Link>
|
|
</Stack>
|
|
|
|
{loading ? (
|
|
<center>
|
|
<CircularProgress />
|
|
</center>
|
|
) : (
|
|
<ReactMarkdown children={error ? error.message : data} />
|
|
)}
|
|
</Paper>
|
|
);
|
|
}
|
|
|
|
const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
root.render(
|
|
<React.StrictMode>
|
|
<App />
|
|
</React.StrictMode>
|
|
);
|