CloudHost/LingvAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout extraction refactoring

Browse Source
This commit is contained in:
David
2021-03-18 14:18:29 +01:00
parent eafad585fc
commit a3ae493c25
5 changed files with 120 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
pages/[[...slug]].tsx
View File

@@ -1,10 +1,9 @@
import { useState, useEffect, useReducer, FC, ChangeEvent } from "react";
import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType } from "next";
import Head from "next/head";
import Router from "next/router";
import { Stack, VStack, HStack, IconButton, Button, Link } from "@chakra-ui/react";
import { Stack, VStack, HStack, IconButton } from "@chakra-ui/react";
import { FaExchangeAlt } from "react-icons/fa";
import { CustomError, Header, Footer, LangSelect, TranslationArea } from "../components";
import { CustomError, Layout, LangSelect, TranslationArea } from "../components";
import { useToastOnLoad } from "../hooks";
import { googleScrape, extractSlug } from "../utils/translate";
import { retrieveFiltered } from "../utils/language";
@@ -55,80 +54,50 @@ const Page: FC<InferGetStaticPropsType<typeof getStaticProps>> = ({ translation,
return statusCode ? (
<CustomError statusCode={statusCode} />
) : (
<>
<Head>
<title>
Lingva Translate
</title>
<link rel="icon" href="/favicon.svg" />
</Head>
<Button
as={Link}
href="#main"
userSelect="none"
position="absolute"
top="-100px"
left="0"
_focus={{
top: "0"
}}
>
Skip to content
</Button>
<VStack minH="100vh" spacing={8}>
<Header />
<VStack
as="main"
id="main"
px={[8, null, 24, 40]}
flexGrow={1}
w="full">
<HStack px={[1, null, 3, 4]} w="full">
<LangSelect
id="source"
aria-label="Source language"
value={source}
onChange={handleChange}
langs={sourceLangs}
/>
<IconButton
aria-label="Switch languages"
icon={<FaExchangeAlt />}
colorScheme="lingva"
variant="ghost"
onClick={() => dispatch({ type: Actions.SWITCH_LANGS })}
isDisabled={source === "auto"}
/>
<LangSelect
id="target"
aria-label="Target language"
value={target}
onChange={handleChange}
langs={targetLangs}
/>
</HStack>
<Stack direction={["column", null, "row"]} w="full">
<TranslationArea
id="query"
aria-label="Translation query"
placeholder="Text"
value={query}
onChange={handleChange}
/>
<TranslationArea
id="translation"
aria-label="Translation result"
placeholder="Translation"
value={translation ?? ""}
readOnly={true}
/>
</Stack>
</VStack>
<Footer />
<Layout>
<VStack px={[8, null, 24, 40]} w="full">
<HStack px={[1, null, 3, 4]} w="full">
<LangSelect
id="source"
aria-label="Source language"
value={source}
onChange={handleChange}
langs={sourceLangs}
/>
<IconButton
aria-label="Switch languages"
icon={<FaExchangeAlt />}
colorScheme="lingva"
variant="ghost"
onClick={() => dispatch({ type: Actions.SWITCH_LANGS })}
isDisabled={source === "auto"}
/>
<LangSelect
id="target"
aria-label="Target language"
value={target}
onChange={handleChange}
langs={targetLangs}
/>
</HStack>
<Stack direction={["column", null, "row"]} w="full">
<TranslationArea
id="query"
aria-label="Translation query"
placeholder="Text"
value={query}
onChange={handleChange}
/>
<TranslationArea
id="translation"
aria-label="Translation result"
placeholder="Translation"
value={translation ?? ""}
readOnly={true}
/>
</Stack>
</VStack>
</>
</Layout>
);
}