GitHub/jsoncrack.com
1
0
Fork 0
mirror of https://github.com/AykutSarac/jsoncrack.com.git synced 2025-01-12 19:02:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

update navbar

Browse Source
This commit is contained in:
AykutSarac 2022-02-02 18:50:25 +03:00
parent 09fe688dde
commit 8a7785b0c7
1 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/Navbar/index.tsx
View File

@ -2,6 +2,10 @@ import Link from "next/link";
import React from "react"; import React from "react";
import styled from "styled-components"; import styled from "styled-components";
interface NavbarProps {
isWide?: boolean;
}
const StyledNavbar = styled.div` const StyledNavbar = styled.div`
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -10,9 +14,11 @@ const StyledNavbar = styled.div`
`; `;
const StyledLogo = styled.div` const StyledLogo = styled.div`
position: relative;
font-weight: 600; font-weight: 600;
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
font-weight: 700;
`; `;
const StyledNav = styled.nav` const StyledNav = styled.nav`
@ -21,11 +27,30 @@ const StyledNav = styled.nav`
gap: 20px; 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 ( return (
<StyledNavbar> <StyledNavbar>
<Link href="/" passHref> <Link href="/">
<StyledLogo>JSON Visio</StyledLogo> <a>
<StyledLogo>
<StyledTitleWrapper>JSON</StyledTitleWrapper> Visio
<StyledBetaText>BETA!</StyledBetaText>
</StyledLogo>
</a>
</Link> </Link>
<StyledNav> <StyledNav>
<Link href="/editor"> <Link href="/editor">
@ -38,5 +63,3 @@ const Navbar: React.FC = () => {
</StyledNavbar> </StyledNavbar>
); );
}; };
export default Navbar;