OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Add Twitter button to footer

Browse source
This commit is contained in:
Emi Matchu 2021-03-13 03:14:35 -08:00
parent 841c96d56a
commit df225dc1ae
1 changed files with 20 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/app/GlobalFooter.js
View file

@ -6,9 +6,10 @@ import {
Link as ChakraLink, Link as ChakraLink,
Tooltip, Tooltip,
useColorMode, useColorMode,
Grid,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons"; import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
import { SiGithub } from "react-icons/si"; import { SiGithub, SiTwitter } from "react-icons/si";
import { Link as RouterLink, useRouteMatch } from "react-router-dom"; import { Link as RouterLink, useRouteMatch } from "react-router-dom";
function GlobalFooter() { function GlobalFooter() {
@ -36,11 +37,15 @@ function GlobalFooter() {
Reserved. Used With Permission. Reserved. Used With Permission.
</Box> </Box>
</Box> </Box>
<HStack <Grid
flex="1 0 0" flex="1 0 0"
spacing="2" templateColumns={{
base: "repeat(2, min-content)",
sm: "repeat(4, min-content)",
}}
gap="2"
justifyContent="end"
marginLeft="3" marginLeft="3"
justifyContent="flex-end"
opacity="0.75" opacity="0.75"
transition="opacity 0.2s" transition="opacity 0.2s"
_hover={{ opacity: "1" }} _hover={{ opacity: "1" }}
@ -62,6 +67,16 @@ function GlobalFooter() {
icon={<EmailIcon />} icon={<EmailIcon />}
/> />
</Tooltip> </Tooltip>
<Tooltip label="Twitter">
<IconButton
as="a"
href="https://twitter.com/NeopetsDTI"
size="sm"
variant="outline"
aria-label="Twitter"
icon={<SiTwitter />}
/>
</Tooltip>
<Tooltip label="GitHub"> <Tooltip label="GitHub">
<IconButton <IconButton
as="a" as="a"
@ -73,7 +88,7 @@ function GlobalFooter() {
/> />
</Tooltip> </Tooltip>
<ColorModeButton /> <ColorModeButton />
</HStack> </Grid>
</Box> </Box>
); );
} }