From 13877b5e1175cc48673ce55022d251e06e95a4af Mon Sep 17 00:00:00 2001 From: David Date: Tue, 16 Mar 2021 01:33:19 +0100 Subject: [PATCH] Initial theme designed --- components/ColorModeToggler.tsx | 22 + components/Footer.tsx | 22 + components/Header.tsx | 42 ++ components/LangSelect.tsx | 26 + components/Languages.tsx | 15 - components/TranslationArea.tsx | 23 + components/index.tsx | 4 + package.json | 8 +- pages/[[...slug]].tsx | 82 +-- pages/_app.tsx | 12 + pages/_document.tsx | 18 + public/banner_dark.svg | 221 ++++++++ public/banner_light.svg | 221 ++++++++ public/favicon.svg | 150 +++-- theme.ts | 47 ++ yarn.lock | 946 +++++++++++++++++++++++++++++++- 16 files changed, 1739 insertions(+), 120 deletions(-) create mode 100644 components/ColorModeToggler.tsx create mode 100644 components/Footer.tsx create mode 100644 components/Header.tsx create mode 100644 components/LangSelect.tsx delete mode 100644 components/Languages.tsx create mode 100644 components/TranslationArea.tsx create mode 100644 components/index.tsx create mode 100644 pages/_app.tsx create mode 100644 pages/_document.tsx create mode 100644 public/banner_dark.svg create mode 100644 public/banner_light.svg create mode 100644 theme.ts 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 }) => ( +