NavBar

Author: CodeStix

components/CenterContainer.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import styled from "styled-components";
+
+export interface CenterContainerProps {
+    style?: React.CSSProperties;
+}
+
+const InnerContainer = styled.div`
+    margin: 0 0.5em;
+    display: flex;
+    justify-content: center;
+`;
+
+const OuterContainer = styled.div`
+    max-width: 1000px;
+    width: 1000px;
+`;
+
+export function CenterContainer({ children, ...rest }: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+    return (
+        <InnerContainer {...rest}>
+            <OuterContainer>{children}</OuterContainer>
+        </InnerContainer>
+    );
+}

components/NavBar.tsx

@@ -0,0 +1,33 @@
+import { CenterContainer } from "./CenterContainer";
+import styled from "styled-components";
+
+const Name = styled.span`
+    margin: 0.8em 0;
+    font-weight: bold;
+    font-size: 1.5rem;
+    color: #2065af;
+    margin-right: auto;
+`;
+
+const NavItem = styled.div`
+    padding: 1em;
+    color: #195daa;
+`;
+
+const Container = styled.div`
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #0002;
+`;
+
+export function NavBar() {
+    return (
+        <CenterContainer>
+            <Container>
+                <Name>Typed React form</Name>
+                <NavItem>Test</NavItem>
+                <NavItem>GitHub</NavItem>
+            </Container>
+        </CenterContainer>
+    );
+}

package.json

@@ -10,11 +10,13 @@
   "dependencies": {
     "next": "10.0.8",
     "react": "17.0.1",
-    "react-dom": "17.0.1"
+    "react-dom": "17.0.1",
+    "styled-components": "^5.2.1"
   },
   "devDependencies": {
     "@types/node": "^14.14.34",
     "@types/react": "^17.0.3",
+    "@types/styled-components": "^5.1.8",
     "typescript": "^4.2.3"
   }
 }

pages/index.tsx

@@ -1,5 +1,16 @@
 import Head from "next/head";
+import React from "react";
+import { CenterContainer } from "../components/CenterContainer";
+import { NavBar } from "../components/NavBar";
 
 export default function Home() {
-    return <div>this is a test</div>;
+    return (
+        <>
+            <NavBar />
+            <CenterContainer style={{ margin: "2em 0" }}>
+                <h2>Welcome to the docs!</h2>
+                <p>Here you can find the docs</p>
+            </CenterContainer>
+        </>
+    );
 }