diff --git a/components/ColorModeToggler.tsx b/components/ColorModeToggler.tsx new file mode 100644 index 0000000..789c4e1 --- /dev/null +++ b/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) => { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + : } + colorScheme="lingva" + onClick={toggleColorMode} + {...props} + /> + ); +}; + +export default ColorModeToggler; diff --git a/components/Footer.tsx b/components/Footer.tsx new file mode 100644 index 0000000..a95c657 --- /dev/null +++ b/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) => ( +
+ © 2021 TheDavidDelta + · + Licensed under AGPLv3 +
+); + +export default Footer; diff --git a/components/Header.tsx b/components/Header.tsx new file mode 100644 index 0000000..e8eeebc --- /dev/null +++ b/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) => ( + + Logo + + + } + colorScheme="lingva" + /> + + +); + +export default Header; diff --git a/components/LangSelect.tsx b/components/LangSelect.tsx new file mode 100644 index 0000000..3c31511 --- /dev/null +++ b/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) => void, + langs: [string, string][], + [key: string]: any +}; + +const LangSelect: FC = ({ value, onChange, langs, ...props }) => ( + +); + +export default LangSelect; diff --git a/components/Languages.tsx b/components/Languages.tsx deleted file mode 100644 index 5b614fa..0000000 --- a/components/Languages.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { FC } from "react"; - -type Props = { - langs: [string, string][] -}; - -const Languages: FC = ({ langs }) => ( - <> - {langs.map(([code, name]) => ( - - ))} - -); - -export default Languages; diff --git a/components/TranslationArea.tsx b/components/TranslationArea.tsx new file mode 100644 index 0000000..8c37d56 --- /dev/null +++ b/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) => void, + readOnly?: true + [key: string]: any +}; + +const TranslationArea: FC = ({ value, onChange, readOnly, ...props }) => ( +