HammadYousaf01 · HammadYousaf01 · Jul 5, 2023 · Jul 6, 2023 · Jul 6, 2023 · Jul 6, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -11,5 +11,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    'react/prop-types': 'off'
   },
 }
diff --git a/index.html b/index.html
@@ -4,10 +4,13 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
     <title>Vite + React</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,17 +1,21 @@
 {
-  "name": "temp",
+  "name": "react-posts-app",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
-    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "build": "tsc && vite build",
+    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.4.0",
+    "axios-hooks": "^4.0.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.1",
+    "swr": "^2.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.37",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/public/vite.svg b/public/vite.svg
diff --git a/src/App.jsx b/src/App.jsx
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import {
+  RouterProvider,
+  createBrowserRouter,
+  createRoutesFromElements,
+  Route,
+  Outlet,
+} from "react-router-dom";
+
+import Posts, { CreatePost, SinglePost } from "./components/posts";
+import Nav from "./components/navbar";
+
+const App: React.FC = () => {
+  const router = createBrowserRouter(
+    createRoutesFromElements(
+      <Route path="/" element={<Root />}>
+        <Route index element={<Posts />} />
+        <Route path="posts">
+          <Route index element={<Posts />} />
+          <Route path=":id" element={<SinglePost />} />
+          <Route path="new" element={<CreatePost />} />
+        </Route>
+      </Route>
+    )
+  );
+
+  return <RouterProvider router={router} />;
+};
+
+const Root: React.FC = () => {
+  return (
+    <>
+      <Nav />
+      <Outlet />
+    </>
+  );
+};
+
+export default App;
diff --git a/src/components/navbar/Nav.tsx b/src/components/navbar/Nav.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+import NavTitle from "./NavTitle";
+import NavLinks from "./NavLinks";
+import "./styles/nav.css"
+
+
+const Nav: React.FC = () => {
+  return (
+    <nav className="nav">
+      <NavTitle title={"React Posts App"}/>
+      <NavLinks />
+    </nav>
+  )
+}
+
+export default Nav;
diff --git a/src/components/navbar/NavLink.tsx b/src/components/navbar/NavLink.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+
+interface Props {
+  title: string,
+  link: string
+}
+
+const NavLink: React.FC<Props> = ({ title, link }) => {
+  return (
+    <Link to={link} className="nav-link">{title}</Link>
+  )
+}
+
+export default NavLink;