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>
+  );
+}

src/components/styles/Button.styled.ts

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+
+const StyledButton = styled.button<{ $primary?: boolean }>`
+  font-size: 1em;
+  padding: 0.25em 1em;
+  border: 2px solid ${({ theme }) => theme.colors.primary};
+
+  background: ${({ $primary, theme }) => ($primary ? theme.colors.primary : 'white')};
+  color: ${({ $primary, theme }) => ($primary ? 'white' : theme.colors.primary)};
+`;
+
+export default StyledButton;

src/components/styles/Global.styled.ts

@@ -0,0 +1,31 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyles = createGlobalStyle`
+   :root {
+      font-family: Inter, system-ui, Arial, sans-serif;
+      font-weight: 400;
+      font-size: 16px;
+
+      color-scheme: light dark;
+      color: white;
+      background-color: #242424;
+
+      font-synthesis: none;
+      text-rendering: optimizeLegibility;
+   }
+
+   * {
+      box-sizing: border-box;
+   }
+
+   body {
+      margin: 0;
+      min-height: 100vh;
+      width: 100%;
+   }
+
+   a {
+      color: white;
+      text-decoration: none;
+   }
+`;

src/components/styles/Navbar.styled.ts

@@ -0,0 +1,26 @@
+import { styled } from 'styled-components';
+
+export const StyledNavbar = styled.nav`
+  display: flex;
+  justify-content: space-between;
+
+  color: black;
+  font-size: 1.2em;
+  background-color: ${({ theme }) => theme.colors.primary};
+  padding: 0.5em;
+`;
+
+export const StyledNavlinkBrand = styled.div`
+  color: black;
+  opacity: 0.85;
+  font-weight: 700;
+`;
+
+export const StyledNavlinkList = styled.div`
+  display: flex;
+  gap: 0.5em;
+`;
+
+export const StyledNavlink = styled.a`
+  color: black;
+`;