importing react

pramit-marattha · Jan 13, 2021 · 13f5b3b · 13f5b3b
1 parent d87ce75
commit 13f5b3b
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 0 deletions.
diff --git a/client/components/Header.js b/client/components/Header.js
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import {APP_NAME} from "../config.js";
+import {
+  Collapse,
+  Navbar,
+  NavbarToggler,
+  NavbarBrand,
+  Nav,
+  NavItem,
+  NavLink,
+  UncontrolledDropdown,
+  DropdownToggle,
+  DropdownMenu,
+  DropdownItem,
+  NavbarText
+} from 'reactstrap';
+
+const Header = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <div>
+      <Navbar color="light" light expand="md">
+        <NavbarBrand href="/">{APP_NAME}</NavbarBrand>
+        <NavbarToggler onClick={toggle} />
+        <Collapse isOpen={isOpen} navbar>
+          <Nav className="mr-auto" navbar>
+            <NavItem>
+              <NavLink href="/components/">Components</NavLink>
+            </NavItem>
+            <NavItem>
+              <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
+            </NavItem>
+            <UncontrolledDropdown nav inNavbar>
+              <DropdownToggle nav caret>
+                Options
+              </DropdownToggle>
+              <DropdownMenu right>
+                <DropdownItem>
+                  Option 1
+                </DropdownItem>
+                <DropdownItem>
+                  Option 2
+                </DropdownItem>
+                <DropdownItem divider />
+                <DropdownItem>
+                  Reset
+                </DropdownItem>
+              </DropdownMenu>
+            </UncontrolledDropdown>
+          </Nav>
+          <NavbarText>Simple Text</NavbarText>
+        </Collapse>
+      </Navbar>
+    </div>
+  );
+}
+
+export default Header;
diff --git a/client/components/Layout.js b/client/components/Layout.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+const Layout = ({children   }) =>{
+    return (
+        <>
+            <Header/>
+            {children}
+            <p>footer</p>
+        </>
+    )
+};
+
+export default Layout;
diff --git a/client/config.js b/client/config.js
@@ -0,0 +1,6 @@
+import getConfig from "next/config";
+
+const {publicRuntimeConfig} = getConfig();
+
+export const API = publicRuntimeConfig.PRODUCTION ? "https://techblog-mern-stack.netlify.app" : "http://localhost:4000";
+export const APP_NAME = publicRuntimeConfig.APP_NAME;
diff --git a/client/pages/_document.js b/client/pages/_document.js
@@ -0,0 +1,24 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+           <link rel="stylesheet" 
+           href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" 
+           integrity="sha512-oc9+XSs1H243/FRN9Rw62Fn8EtxjEYWHXRvjS43YtueEewbS6ObfXcJNyohjHqVKFPoXXUxwc+q1K7Dee6vv9g==" 
+           crossOrigin="anonymous" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument
diff --git a/client/pages/index.js b/client/pages/index.js
@@ -0,0 +1,11 @@
+import Layout from "../components/Layout"
+
+const Index =() =>{
+    return(
+        <Layout>
+        <h2>Yoo This is working</h2>
+        </Layout>
+    )
+}
+
+export default Index;