ADD : main components

prayag1740 · Oct 9, 2022 · 0000918 · 0000918
1 parent 537f820
commit 0000918
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 16 deletions.
diff --git a/public/index.html b/public/index.html
@@ -7,14 +7,15 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Newsmonkey is a news app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +25,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>News Monkey -- Get your daily dose of news for free</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -39,5 +40,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,12 +1,15 @@
 import './App.css';
 
 import React, { Component } from 'react'
+import NavBar from './components/NavBar';
+import News from './components/News';
 
 export default class App extends Component {
   render() {
     return (
       <div>
-        Hello my first class based component
+        <NavBar />
+        <News />
       </div>
     )
   }

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types'
+import React, { Component } from 'react'
+
+export class NavBar extends Component {
+  static propTypes = {}
+
+  render() {
+    return (
+      <div>
+        <nav className="navbar navbar-expand-lg bg-light">
+  <div className="container-fluid">
+    <a className="navbar-brand" href="#">NewsMonkey</a>
+    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+      <span className="navbar-toggler-icon"></span>
+    </button>
+    <div className="collapse navbar-collapse" id="navbarSupportedContent">
+      <ul className="navbar-nav me-auto mb-2 mb-lg-0">
+        <li className="nav-item">
+          <a className="nav-link active" aria-current="page" href="#">Home</a>
+        </li>
+        <li className="nav-item">
+          <a className="nav-link" href="#">About</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+      </div>
+    )
+  }
+}
+
+export default NavBar
diff --git a/src/components/News.js b/src/components/News.js
@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import NewsItem from './NewsItem'
+
+export class News extends Component {
+  render() {
+    return (
+      <div>This is a news component
+         <NewsItem/>
+         <NewsItem/>
+         <NewsItem/>
+         <NewsItem/>
+         <NewsItem/>
+      </div>
+    )
+  }
+}
+
+export default News
diff --git a/src/components/NewsItem.js b/src/components/NewsItem.js
@@ -0,0 +1,13 @@
+import React, { Component } from 'react'
+
+export class NewsItem extends Component {
+  render() {
+    return (
+      <div>
+        This is a news item
+      </div>
+    )
+  }
+}
+
+export default NewsItem
diff --git a/src/index.css b/src/index.css
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}