Dependencies updated & small enhancements (#27)

* Dependencies updated and imports shortened

* Head tags refactored

* Final tweaks
This commit is contained in:
David
2021-06-12 22:44:56 +02:00
committed by GitHub
parent 030de63b2a
commit bdaced0457
29 changed files with 2523 additions and 3373 deletions

View File

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