Add discord url to top bar

Author: nekiro

.env.example

@@ -1,6 +1,7 @@
 # browser
 NEXT_PUBLIC_API_URL=http://localhost:3000
 NEXT_PUBLIC_SERVER_NAME="shibaac"
+NEXT_PUBLIC_DISCORD_URL="https://discord.gg/invite/your_discord"
 
 DATABASE_URL="mysql://root:secret@localhost:3306/shibaac"
 

public/fonts/Roboto-Bold.ttf

@@ -9,7 +9,7 @@ export interface LinkProps extends ChakraLinkProps {
 
 const Link = ({ href, text, children, ...props }: LinkProps) => {
 	return (
-		<ChakraLink as={NextLink} href={href} passHref color="violet.500" {...props}>
+		<ChakraLink as={NextLink} href={href} color="violet.500" {...props}>
 			{text ?? children}
 		</ChakraLink>
 	);

public/fonts/Roboto-Light.ttf

@@ -0,0 +1,5 @@
+import { Box } from "@chakra-ui/react";
+
+export const TopBarSeparator = () => {
+	return <Box bgColor="violet.400" w="1px" h="100%" />;
+};

public/images/discord-logo-white.svg

@@ -1,15 +1,17 @@
-import { Flex, Text, Box } from "@chakra-ui/react";
+import { Flex, Text } from "@chakra-ui/react";
 import { TopBarItem } from "./TopBarItem";
 import { trpc } from "@util/trpc";
 import Link from "@component/Link";
+import { TopBarSeparator } from "./TopBarSeparator";
+import { FaDiscord } from "react-icons/fa";
 
 export const TopBar = () => {
 	const status = trpc.status.status.useQuery().data;
 
 	return (
 		<Flex justifyContent="center" bgColor="blackAlpha.600" h="40px" borderBottomWidth="1px" borderColor="violet.400">
 			<Flex alignItems="center" flexDir="row" gap="5px">
-				<Box bgColor="violet.400" w="1px" h="100%" />
+				<TopBarSeparator />
 				<Link href="/online">
 					<TopBarItem alignItems="center" flexDirection="row">
 						<Text fontSize="md" color={status?.online ? "green" : "red"}>
@@ -20,8 +22,20 @@ export const TopBar = () => {
 						</Text>
 					</TopBarItem>
 				</Link>
-
-				<Box bgColor="violet.400" w="1px" h="100%" />
+				<TopBarSeparator />
+				<Link href="/downloads" color="white">
+					<TopBarItem>
+						<Text fontSize="md">Download Client</Text>
+					</TopBarItem>
+				</Link>
+				<TopBarSeparator />
+				<Link href={process.env.NEXT_PUBLIC_DISCORD_URL ?? ""} isExternal color="white">
+					<TopBarItem alignItems="center" gap="5px">
+						<FaDiscord />
+						<Text fontSize="md">Join discord</Text>
+					</TopBarItem>
+				</Link>
+				<TopBarSeparator />
 			</Flex>
 		</Flex>
 	);