update navbar

src/components/Navbar/index.tsx

@@ -2,6 +2,10 @@ import Link from "next/link";
 import React from "react";
 import styled from "styled-components";
 
+interface NavbarProps {
+  isWide?: boolean;
+}
+
 const StyledNavbar = styled.div`
   display: flex;
   justify-content: space-between;
@@ -10,9 +14,11 @@ const StyledNavbar = styled.div`
 `;
 
 const StyledLogo = styled.div`
+  position: relative;
   font-weight: 600;
   font-size: 20px;
   cursor: pointer;
+  font-weight: 700;
 `;
 
 const StyledNav = styled.nav`
@@ -21,11 +27,30 @@ const StyledNav = styled.nav`
   gap: 20px;
 `;
 
-const Navbar: React.FC = () => {
+const StyledTitleWrapper = styled.span`
+  color: ${({ theme }) => theme.ORANGE};
+`;
+
+const StyledBetaText = styled.span`
+  position: absolute;
+  top: 0;
+  right: 0;
+  transform: translate(85%, -25%);
+  color: ${({ theme }) => theme.BLURPLE};
+  font-size: 12px;
+  font-weight: 400;
+`;
+
+export const Navbar: React.FC<NavbarProps> = () => {
   return (
     <StyledNavbar>
-      <Link href="/" passHref>
-        <StyledLogo>JSON Visio</StyledLogo>
+      <Link href="/">
+        <a>
+          <StyledLogo>
+            <StyledTitleWrapper>JSON</StyledTitleWrapper> Visio
+            <StyledBetaText>BETA!</StyledBetaText>
+          </StyledLogo>
+        </a>
       </Link>
       <StyledNav>
         <Link href="/editor">
@@ -38,5 +63,3 @@ const Navbar: React.FC = () => {
     </StyledNavbar>
   );
 };
-
-export default Navbar;