Merge pull request #63 from bilalscripts/develop

[add] Banner Component [Fixes #51]

Author: orama254

components/Banner.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const Banner = () => {
+  return (
+    <div>
+      <div className="bg-white">
+        <div
+          className="p-4"
+          style={{
+            background:
+              "repeating-linear-gradient(-55deg, #222, rgb(34, 34, 34) 10px, rgb(234, 179, 8) 10px, rgb(234, 179, 8) 20px)",
+          }}
+        />
+        <div className="p-4 text-center text-gray-900 bg-yellow-500 font-bold">
+          UNDER CONSTRUCTION
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Banner;

pages/_app.jsx

@@ -1,9 +1,11 @@
 import Navbar from "../components/Navbar.jsx";
 import "../styles/globals.css";
+import Banner from "../components/Banner.jsx";
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
+      <Banner />
       <Navbar />
       <Component {...pageProps} />
     </>

pages/index.jsx

@@ -1,6 +1,6 @@
 import Head from "next/head";
+import Banner from "../components/Banner";
 import Image from "next/image";
-// import styles from '../styles/Home.module.css'
 import logo from "../public/reactdevske.svg";
 
 export default function Home() {

styles/globals.css

@@ -9,7 +9,7 @@ body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
     Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
-    background-color: #333333;
+  background-color: #333333;
 }
 
 a {
@@ -19,4 +19,4 @@ a {
 
 * {
   box-sizing: border-box;
-}
+}