initial structure of header and nav bar

turingschool · Aug 22, 2024 · 4ecf1ba · 4ecf1ba
1 parent e68f6c7
commit 4ecf1ba
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 0 deletions.
diff --git a/public/irvan-smith-5eBW5GomfhY-unsplash.jpg b/public/irvan-smith-5eBW5GomfhY-unsplash.jpg
diff --git a/public/turlink_logo.png b/public/turlink_logo.png
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import Header from './Components/Header/Header';
 
 function App() {
   return (
     <div className="App">
+      <Header />
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>

diff --git a/src/Components/Header/Header.css b/src/Components/Header/Header.css
diff --git a/src/Components/Header/Header.tsx b/src/Components/Header/Header.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import './Header.css';
+
+const Header: React.FC = () => {
+    return (
+        <header className="header">
+            <nav className="navbar">
+                <div className="left-section">
+                    <img src="/turlink_logo.png" alt="TurLink's logo"></img>
+                    <h1 className="site-name">TurLink</h1>
+                </div>
+                <div className="nav-links">
+                    <a href="/dashboard" className="nav-link">Dashboard</a>
+                    <a href="/about" className="nav-link">About</a>
+                    <a href="/login" className="nav-link">Login</a>
+                </div>
+            </nav>
+        </header>
+    )
+}
+
+export default Header;