feat: ✨ add links from dashboard (#9)

* add button to create links * minor changes * remove host on short url list
carlosazaustre · Jul 11, 2021 · 7073442 · 7073442 · vercel · Jul 11, 2021
1 parent 06a5181
commit 7073442
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/components/Footer.js b/components/Footer.js
@@ -10,18 +10,18 @@ export function Footer() {
         justify="center"
         textAlign="center">
         <Text fontSize="sm" color="gray.500">
-          Powered by{" "}
+          Made by{" "}
           <span role="img" aria-label="love">
             ❤️
-          </span>{" "}
+          </span>
           &amp;{" "}
           <span role="img" aria-label="code">
             💻
           </span>{" "}
           by <Link href="//carlosazaustre.es">Carlos Azaustre</Link>
         </Text>
         <Text fontSize="xs" color="gray.500">
-          Hosted on <Link href="//vercel.com">Vercel</Link> &{" "}
+          Powered by <Link href="//vercel.com">Vercel</Link> &{" "}
           <Link href="/zipuc3s">Digital Ocean</Link>
         </Text>
       </Flex>

diff --git a/components/Nav.js b/components/Nav.js
@@ -1,4 +1,5 @@
 import { useUser } from "@auth0/nextjs-auth0";
+import { AddIcon } from "@chakra-ui/icons";
 import { Flex, LinkBox, LinkOverlay, Text } from "@chakra-ui/react";
 
 export function Nav() {
@@ -17,6 +18,23 @@ export function Nav() {
       justify="flex-end"
       align="center">
       <Text mr={4}>Hi, {user.email}!</Text>
+
+      <LinkBox
+        borderWidth="1px"
+        borderColor="purple.500"
+        px={4}
+        py={2}
+        mr={4}
+        lineHeight={6}
+        rounded="lg"
+        maxW="md"
+        _hover={{ bg: "purple.500", color: "white" }}>
+        <AddIcon />
+        <LinkOverlay ml={2} href="/">
+          Create Link
+        </LinkOverlay>
+      </LinkBox>
+
       <LinkBox
         borderWidth="1px"
         borderColor="purple.500"
@@ -28,6 +46,7 @@ export function Nav() {
         _hover={{ bg: "purple.500", color: "white" }}>
         <LinkOverlay href="/dashboard">My Links</LinkOverlay>
       </LinkBox>
+
       <LinkBox
         borderWidth="1px"
         borderColor="purple.500"

diff --git a/pages/dashboard.js b/pages/dashboard.js
@@ -56,10 +56,7 @@ export default function Dashboard({ links }) {
                   </Td>
                   <Td>
                     <LinkIcon color="purple.500" />
-                    <Link
-                      ml={2}
-                      color="purple.500"
-                      href={`//czstr.link/${link.shortUrl}`}>
+                    <Link ml={2} color="purple.500" href={`/${link.shortUrl}`}>
                       czstr.link/<strong>{link.shortUrl}</strong>
                     </Link>
                   </Td>