Initial theme designed

components/ColorModeToggler.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { IconButton, useColorMode } from "@chakra-ui/react";
+import { SunIcon, MoonIcon } from "@chakra-ui/icons";
+
+type Props = {
+    [key: string]: any
+};
+
+const ColorModeToggler: FC<Props> = (props) => {
+    const { colorMode, toggleColorMode } = useColorMode();
+    return (
+        <IconButton
+            aria-label="Toggle color mode"
+            icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
+            colorScheme="lingva"
+            onClick={toggleColorMode}
+            {...props}
+        />
+    );
+};
+
+export default ColorModeToggler;

components/Footer.tsx

@@ -0,0 +1,22 @@
+import { FC } from "react";
+import { Center, Text, useColorModeValue } from "@chakra-ui/react";
+
+type Props = {
+    [key: string]: any
+};
+
+const Footer: FC<Props> = (props) => (
+    <Center
+        w="full"
+        p={3}
+        fontSize={["sm", null, "md"]}
+        bgColor={useColorModeValue("lingva.100", "lingva.900")}
+        {...props}
+    >
+        <Text as="span">&#169; 2021 TheDavidDelta</Text>
+        <Text as="span" mx={2}>·</Text>
+        <Text as="span">Licensed under AGPLv3</Text>
+    </Center>
+);
+
+export default Footer;

components/Header.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react";
+import { Flex, HStack, useColorModeValue, IconButton, Link } from "@chakra-ui/react";
+import { FaGithub } from "react-icons/fa";
+import Image from "next/image";
+import ColorModeToggler from "./ColorModeToggler";
+
+type Props = {
+    [key: string]: any
+};
+
+const Header: FC<Props> = (props) => (
+    <Flex
+        px={1}
+        py={3}
+        justify="space-around"
+        align="center"
+        bgColor={useColorModeValue("lingva.100", "lingva.900")}
+        w="full"
+        {...props}
+    >
+        <Image
+            src={useColorModeValue("/banner_light.svg", "/banner_dark.svg")}
+            alt="Logo"
+            layout="intrinsic"
+            width={110}
+            height={64}
+        />
+        <HStack spacing={4}>
+            <ColorModeToggler/>
+            <IconButton
+                as={Link}
+                href="https://github.com/TheDavidDelta/lingva-translate"
+                isExternal={true}
+                aria-label="GitHub"
+                icon={<FaGithub />}
+                colorScheme="lingva"
+            />
+        </HStack>
+    </Flex>
+);
+
+export default Header;

components/LangSelect.tsx

@@ -0,0 +1,26 @@
+import { FC, ChangeEvent } from "react";
+import { Select } from "@chakra-ui/react";
+
+type Props = {
+    value: string,
+    onChange: (e: ChangeEvent<any>) => void,
+    langs: [string, string][],
+    [key: string]: any
+};
+
+const LangSelect: FC<Props> = ({ value, onChange, langs, ...props }) => (
+    <Select
+        value={value}
+        onChange={onChange}
+        variant="flushed"
+        px={2}
+        textAlign="center"
+        {...props}
+    >
+        {langs.map(([code, name]) => (
+            <option value={code} key={code}>{name}</option>
+        ))}
+    </Select>
+);
+
+export default LangSelect;

components/Languages.tsx

@@ -1,15 +0,0 @@
-import { FC } from "react";
-
-type Props = {
-    langs: [string, string][]
-};
-
-const Languages: FC<Props> = ({ langs }) => (
-    <>
-        {langs.map(([code, name]) => (
-            <option value={code} key={code}>{name}</option>
-        ))}
-    </>
-);
-
-export default Languages;

components/TranslationArea.tsx

@@ -0,0 +1,23 @@
+import { FC, ChangeEvent } from "react";
+import { Textarea, useBreakpointValue } from "@chakra-ui/react";
+
+type Props =  {
+    value: string,
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void,
+    readOnly?: true
+    [key: string]: any
+};
+
+const TranslationArea: FC<Props> = ({ value, onChange, readOnly, ...props }) => (
+    <Textarea
+        value={value}
+        onChange={onChange}
+        readOnly={readOnly}
+        resize="none"
+        rows={useBreakpointValue([6, null, 12]) ?? undefined}
+        size="lg"
+        {...props}
+    />
+);
+
+export default TranslationArea;

components/index.tsx

@@ -0,0 +1,4 @@
+export { default as Header } from "./Header";
+export { default as Footer } from "./Footer";
+export { default as LangSelect } from "./LangSelect";
+export { default as TranslationArea } from "./TranslationArea";