HammadYousaf01 · HammadYousaf01 · Jul 5, 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,6 +4,9 @@
     <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>

diff --git a/package.json b/package.json
@@ -10,8 +10,11 @@
     "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",
+    "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
@@ -1,7 +1,11 @@
+import Posts, { PostsAxios } from "./components/posts";
+import Nav from "./components/navbar";
+
 function App() {
   return (
     <>
-      <h1>Hello, World!</h1>
+      <Nav />
+      <Posts totalPosts={10} />
     </>
   )
 }

diff --git a/src/components/navbar/Nav.jsx b/src/components/navbar/Nav.jsx
@@ -0,0 +1,14 @@
+import NavTitle from "./NavTitle";
+import NavLinks from "./NavLinks";
+
+import "./nav.css"
+
+
+export default function Nav() {
+  return (
+    <nav className="nav">
+      <NavTitle title={"React Posts App"}/>
+      <NavLinks />
+    </nav>
+  )
+}
diff --git a/src/components/navbar/NavLink.jsx b/src/components/navbar/NavLink.jsx
@@ -0,0 +1,7 @@
+
+
+export default function NavLink({ title }) {
+  return (
+    <div className="nav-link">{title}</div>
+  )
+}
diff --git a/src/components/navbar/NavLinks.jsx b/src/components/navbar/NavLinks.jsx
@@ -0,0 +1,10 @@
+import NavLink from "./NavLink";
+
+
+export default function NavLinks() {
+  return (
+    <div className="nav-links-container">
+      <NavLink title="Create"/>
+    </div>
+  )
+}
diff --git a/src/components/navbar/NavTitle.jsx b/src/components/navbar/NavTitle.jsx
@@ -0,0 +1,10 @@
+
+
+export default function NavTitle({ title }) {
+  return (
+    <div className="nav-title-container">
+      <h1 className="nav-title">{title}</h1>
+    </div>
+  )
+}
+
diff --git a/src/components/navbar/index.jsx b/src/components/navbar/index.jsx
@@ -0,0 +1,3 @@
+import Nav from "./Nav";
+
+export default Nav;
diff --git a/src/components/navbar/nav.css b/src/components/navbar/nav.css
@@ -0,0 +1,36 @@
+
+.nav {
+  display: flex;
+  color: white;
+  background-color: #0078FB;
+  padding: 0 20px;
+}
+
+.nav-title {
+  font-size: 22px;
+  padding: 10px;
+}
+
+.nav-links-container {
+  flex: 1;
+  display: flex;
+  justify-content: end;
+  align-items: center;
+}
+
+.nav-link {
+  padding: 10px;
+  font-size: 14px;
+  font-weight: 500;
+  border-radius: 5px;
+  color: white;
+  border: 1px solid white;
+  margin: 5px;
+  text-transform: uppercase;
+}
+
+.nav-link:hover {
+  color: #0078FB;
+  background-color: white;
+  transition-delay: 0.1s;
+}
diff --git a/src/components/posts/Post.jsx b/src/components/posts/Post.jsx
@@ -0,0 +1,17 @@
+
+
+function Post({ title, body }) {
+  return (
+    <div className="post">
+      <div className="post-title">
+        {title}
+      </div>
+      <div className="post-body">
+        {body}
+      </div>
+    </div>
+  )
+}
+
+
+export default Post;
diff --git a/src/components/posts/Posts.jsx b/src/components/posts/Posts.jsx
@@ -0,0 +1,22 @@
+import Post from "./Post";
+import "./posts.css";
+
+import usePosts from "./utils";
+
+
+function Posts({ totalPosts }) {
+  const { posts, error, isLoading } = usePosts();
+
+  if (isLoading) return <div>...Loading</div>
+  if (error) return <div>{error}</div>
+  return (
+    <div className="posts">
+      {posts.data.slice(0, totalPosts).map(post => 
+        <Post key={post.id} title={post.title} body={post.body} />
+      )}
+    </div>
+  )
+}
+
+
+export default Posts;