frontend converted to ts

client/src/components/layout/Navbar.tsx

@@ -0,0 +1,57 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import { logOut } from "../../reducers/auth";
+import { useAppDispatch, useAppSelector } from "../../utils/hooks";
+
+const Navbar = () => {
+  const isAuthenticated = useAppSelector((state) => state.auth.isAuthenticated);
+  const dispatch = useAppDispatch();
+  const authLinks = (
+    <ul>
+      <li>
+        <Link to="/profiles">Developers</Link>
+      </li>
+      <li>
+        <Link to="/posts">Posts</Link>
+      </li>
+      <li>
+        <Link to="/dashboard">
+          <i className="fas fa-user" /> <span className="hide-sm">Profile</span>
+        </Link>
+      </li>
+      <li>
+        <a onClick={()=>dispatch(logOut())} href="#!">
+          <i className="fas fa-sign-out-alt" />{' '}
+          <span className="hide-sm">Logout</span>
+        </a>
+      </li>
+    </ul>
+  );
+
+  const guestLinks = (
+    <ul>
+      <li>
+        <Link to="/profiles">Developers</Link>
+      </li>
+      <li>
+        <Link to="/register">Register</Link>
+      </li>
+      <li>
+        <Link to="/login">Login</Link>
+      </li>
+    </ul>
+  );
+
+  return (
+    <nav className="navbar bg-dark">
+      <h1>
+        <Link to="/posts">
+          <i className="fas fa-code" /> DevConnector
+        </Link>
+      </h1>
+      <Fragment>{isAuthenticated ? authLinks : guestLinks}</Fragment>
+    </nav>
+  );
+};
+
+export default Navbar;