Initial theme designed

2021-03-16 01:33:19 +01:00
parent 6153f739d2
commit 13877b5e11
16 changed files with 1739 additions and 120 deletions
--- a/components/Header.tsx
+++ 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> = (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;