styled components; navbar section

src/components/Navbar.tsx

@@ -0,0 +1,50 @@
+import { StyledNavbar, StyledNavlink, StyledNavlinkBrand, StyledNavlinkList } from './styles/Navbar.styled';
+
+interface NavLink {
+  title: string;
+  href: string;
+}
+
+function NavlinkList(props: { navlinks: NavLink[] }) {
+  return (
+    <>
+      <StyledNavlinkList>
+        {props.navlinks.map((navlink) => (
+          <StyledNavlink href={navlink.href}>{navlink.title}</StyledNavlink>
+        ))}
+      </StyledNavlinkList>
+    </>
+  );
+}
+
+function NavlinkBrand(props: { name: string }) {
+  return <StyledNavlinkBrand>{props.name}</StyledNavlinkBrand>;
+}
+
+const navlinks = [
+  {
+    title: 'HOME',
+    href: '#',
+  },
+  {
+    title: 'ABOUT',
+    href: '#',
+  },
+  {
+    title: 'PROJECTS',
+    href: '#',
+  },
+  {
+    title: 'CONTACT',
+    href: '#',
+  },
+];
+
+export default function Navbar() {
+  return (
+    <StyledNavbar>
+      <NavlinkBrand name="Spythere Portfolio" />
+      <NavlinkList navlinks={navlinks} />
+    </StyledNavbar>
+  );
+}