Add a footer with social media links

Add Telegram, Twitter and GitHub links to ItchySats.

The footer is styled in the similar way to the header and follows the theme changes.

taker-frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { useEventSource } from "react-sse-hooks";
 import useWebSocket from "react-use-websocket";
 import { useBackendMonitor } from "./components/BackendMonitor";
 import createErrorToast from "./components/ErrorToast";
+import Footer from "./components/Footer";
 import History from "./components/History";
 import Nav from "./components/NavBar";
 import Trade from "./components/Trade";
@@ -169,6 +170,7 @@ export const App = () => {
                     </Route>
                 </Switch>
             </Box>
+            <Footer />
         </>
     );
 };

taker-frontend/src/components/Footer.tsx

@@ -0,0 +1,19 @@
+import { Box, Center, HStack, Text, useColorModeValue } from "@chakra-ui/react";
+import * as React from "react";
+import { SocialLinks } from "./SocialLinks";
+
+export default function Footer() {
+    return (
+        <Box
+            bg={useColorModeValue("gray.50", "gray.900")}
+            color={useColorModeValue("gray.700", "gray.200")}
+        >
+            <Center>
+                <HStack h={16} alignItems={"center"}>
+                    <Text fontSize={"20"} fontWeight={"bold"}>Contact us:</Text>
+                    <SocialLinks />
+                </HStack>
+            </Center>
+        </Box>
+    );
+}

taker-frontend/src/components/SocialLinks.tsx

@@ -0,0 +1,26 @@
+import { ButtonGroup, ButtonGroupProps, IconButton } from "@chakra-ui/react";
+import * as React from "react";
+import { FaGithub, FaTelegram, FaTwitter } from "react-icons/fa";
+
+export const SocialLinks = (props: ButtonGroupProps) => (
+    <ButtonGroup variant="ghost" color="gray.600" {...props}>
+        <IconButton
+            as="a"
+            href="https://t.me/joinchat/ULycH50PLV1jOTI0"
+            aria-label="Telegram join link"
+            icon={<FaTelegram fontSize="20px" />}
+        />
+        <IconButton
+            as="a"
+            href="https://twitter.com/itchysats"
+            aria-label="Twitter"
+            icon={<FaTwitter fontSize="20px" />}
+        />
+        <IconButton
+            as="a"
+            href="https://github.com/itchysats/itchysats"
+            aria-label="GitHub"
+            icon={<FaGithub fontSize="20px" />}
+        />
+    </ButtonGroup>
+);