Move github link, change padding

ntdesmond · Sep 9, 2023 · a9821c6 · a9821c6
1 parent 13aa0f4
commit a9821c6
Showing 1 changed file with 11 additions and 11 deletions.
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import { Box, Center, HStack, Link, Text, VStack } from '@chakra-ui/react';
+import { ReactNode } from 'react';
+import { Box, Center, HStack, Icon, Link, Spacer, VStack } from '@chakra-ui/react';
+import { FiExternalLink } from 'react-icons/fi';
 import NavLink from './NavLink';
 
-const Layout = (props: { children: React.ReactNode }) => (
-  <Center height="100%" width="100%" padding="0.5em" boxSizing="border-box">
+const Layout = (props: { children: ReactNode }) => (
+  <Center height="100%" width="100%" paddingX="3" boxSizing="border-box">
     <VStack height="100%" align="stretch" width="container.lg">
-      <HStack>
+      <HStack paddingTop="1">
         <NavLink to="/">home</NavLink>
         <NavLink to="/cv">cv</NavLink>
+        <Spacer />
+        <Link href={`https://github.com/${import.meta.env.VITE_GITHUB_REPO}`} isExternal>
+          source code
+          <Icon as={FiExternalLink} marginX={2} />
+        </Link>
       </HStack>
       <Box flexGrow="1" as="section">
         {props.children}
       </Box>
-      <Text textAlign="center">
-        Source code of this website is available at{' '}
-        <Link href={`https://github.com/${import.meta.env.VITE_GITHUB_REPO}`} isExternal>
-          GitHub
-        </Link>
-      </Text>
     </VStack>
   </Center>
 );