Merge pull request #79 from Bitshala/notif-banner

Notif banner
Bitshala · Dec 20, 2023 · d4d6dda · d4d6dda
2 parents 723e9e1 + cb52636
commit d4d6dda
Show file tree

Hide file tree

Showing 12 changed files with 188 additions and 147 deletions.
diff --git a/src/components/common/Carousel.jsx b/src/components/common/Carousel.jsx
@@ -39,10 +39,10 @@ const slides = [
 
 const MobileCarousel = () => {
   return (
-    <div className="my-2 flex flex-col lg:hidden  ">
+    <div className="my-2 flex flex-col lg:hidden">
       {slides.map((slide) => {
         return (
-          <div className="my-2 rounded-lg bg-orange p-3">
+          <div key={slide.title} className="my-2 rounded-lg bg-orange p-3">
             <h1 className="mb-5  font-header text-2xl  lg:p-11 lg:text-8xl">
               {slide.title}
             </h1>

diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
@@ -25,19 +25,23 @@ const {
   }}
   class="m-auto flex min-h-[90vh] flex-col items-center justify-between bg-black px-5 pb-12 pt-32 md:rounded-lg"
 >
-  <h1
-    class={`text-center font-header ${headingColor} text-3xl  lg:text-8xl`}
-  >
-    {heading}
-  </h1>
-  <slot name="heading" />
-  <p
-    class={`w-2/3 text-center text-xl ${subheadingColor} lg:text-4xl xl:mb-10`}
-  >
-    {subheading}
-  </p>
-  <slot name="subheading" />
-  <div>
-    <slot name="after-heading" />
-  </div>
+  {
+    heading && subheading ? (
+      <>
+        <h1
+          class={`text-center font-header ${headingColor} text-3xl lg:text-8xl`}
+        >
+          {heading}
+        </h1>
+        <p
+          class={`w-2/3 text-center text-xl ${subheadingColor} lg:text-4xl xl:mb-10`}
+        >
+          {subheading}
+        </p>
+        <div />
+      </>
+    ) : (
+      <slot />
+    )
+  }
 </main>
diff --git a/src/components/common/notification.tsx b/src/components/common/notification.tsx
@@ -0,0 +1,44 @@
+import { Snackbar } from "@mui/material";
+import { FaWindowClose } from "react-icons/fa";
+import { useEffect, useState } from "react";
+
+const Notification = ({
+  message,
+  url,
+}: {
+  message: string;
+  url: string;
+}) => {
+  const [open, setOpen] = useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  useEffect(() => {
+    setTimeout(() => setOpen(true), 500);
+  }, []);
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: "top",
+        horizontal: "center",
+      }}
+      open={open}
+    >
+      <div className="mt-20 flex items-center rounded-md bg-peach p-2  text-center md:mt-0">
+        {message}
+        <a
+          href={url}
+          target="_blank"
+          className="mx-4 rounded-md bg-orange px-2 py-1 text-center hover:bg-black hover:text-orange"
+        >
+          Lets Go!
+        </a>
+        <button aria-label="close" onClick={handleClose}>
+          <FaWindowClose size="2em" />
+        </button>
+      </div>
+    </Snackbar>
+  );
+};
+
+export default Notification;
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,10 +1,14 @@
 ---
+import Footer from "../components/common/Footer.astro";
+import Header from "../components/common/Header.astro";
 import Hamburger from "../components/common/hamburger";
+import Notification from "../components/common/notification";
 interface Props {
   title: string;
+  headerProps: any;
 }
 
-const { title } = Astro.props;
+const { title, headerProps } = Astro.props;
 ---
 
 <!doctype html>
@@ -26,24 +30,33 @@ const { title } = Astro.props;
     <title>{title}</title>
   </head>
   <body class="bg-white">
-    <div class="m-auto max-w-screen-2xl">
-      <nav
-        class="fixed left-0 top-0 z-50 w-full bg-black bg-opacity-[0.95] p-4"
-      >
-        <div class="m-auto flex w-full justify-between">
-          <a href="/website-v2">
-            <img
-              src="/website-v2/footer/logo.png"
-              class="h-16"
-            />
-          </a>
-          <Hamburger client:only />
-        </div>
-      </nav>
+    <nav
+      class="fixed left-0 top-0 z-50 w-full bg-black bg-opacity-[0.95] p-4"
+    >
+      <div class="m-auto flex w-full justify-between">
+        <a href="/website-v2">
+          <img
+            src="/website-v2/footer/logo.png"
+            class="h-16"
+          />
+        </a>
+        <Hamburger client:only />
+      </div>
+    </nav>
+    <Notification
+      message="Apply for a FOSS Career with Chaincode & Bitshala!"
+      url="https://chaincode.applytojob.com/apply/40kEabYKUY/Bitshala-Start-Your-Career-In-Bitcoin-FOSS-Development"
+      client:load
+    />
+    <Header {...headerProps}>
+      <slot name="headerChild" />
+    </Header>
+
+    <div class="m-auto max-w-screen-2xl p-4 lg:p-0">
       <div class="isolate z-0"><slot /></div>
     </div>
+    <Footer />
   </body>
-
   <style>
     @font-face {
       font-family: "Aeonik Fono";

diff --git a/src/pages/cohorts/bpd.astro b/src/pages/cohorts/bpd.astro
@@ -1,23 +1,24 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import Header from "../../components/common/Header.astro";
 import Carousel from "../../components/common/Carousel";
-import Footer from "../../components/common/Footer.astro";
 import Description from "../../components/cohortPages/Description.astro";
 import CohortStructure from "../../components/cohortPages/CohortStructure.astro";
 import CohortDetails from "../../components/cohortPages/CohortDetails.astro";
 import Syllabus from "../../components/cohortPages/Syllabus.astro";
----
 
-<Layout title="Bitcoin Protocol Dev">
-  <Header
-    heading=""
-    subheading=""
-    image="/website-v2/cohort/lbtcl.png"
-    headingColor="text-black"
-    subheadingColor="text-white"
-  />
+const headerProps = {
+  heading: "",
+  subheading: "",
+  image: "/website-v2/cohort/lbtcl.png",
+  headingColor: "text-black",
+  subheadingColor: "text-white",
+};
+---
 
+<Layout
+  title="Bitcoin Protocol Dev"
+  headerProps={headerProps}
+>
   <Description
     takeaways={[
       {
@@ -135,4 +136,3 @@ import Syllabus from "../../components/cohortPages/Syllabus.astro";
 />
 <CohortStructure />
 <Carousel client:visible />
-<Footer />
diff --git a/src/pages/cohorts/index.astro b/src/pages/cohorts/index.astro
@@ -1,9 +1,7 @@
 ---
 import Layout from "../../layouts/Layout.astro";
 import CohortCard from "../../components/cohort/CohortCard.astro";
-import Footer from "../../components/common/Footer.astro";
 import Carousel from "../../components/common/Carousel";
-import Header from "../../components/common/Header.astro";
 import { CollapseList } from "../../components/cohort/CollapseList";
 import Checkerboard from "../../components/cohort/Checkerboard.astro";
 
@@ -29,17 +27,18 @@ const faqConfig = [
     a: "Bitcoin is for the sovereign and not for sheep. Most FOSS projects and ventures look for proof of work before hiring. Your graduating certificate is one of those and can help in opening doors but we advise you to contribute to open-source projects (at BitShala or beyond) to increase your chances of getting hired. FOSS projects incubated by BitShala hire contributors based on the quality of engagement and contributions. We also have a job board to help you find the right Bitcoin gig/work.",
   },
 ];
----
 
-<Layout title="Bitshala Cohorts">
-  <Header
-    heading="Learning Bitcoin alone can be a daunting journey."
-    subheading="Join our cohort and find your tribe"
-    image="/website-v2/cohort/hero.png"
-    headingColor="text-white"
-    subheadingColor="text-white"
-  />
+const headerProps = {
+  heading:
+    "Learning Bitcoin alone can be a daunting journey.",
+  subheading: "Join our cohort and find your tribe",
+  image: "/website-v2/cohort/hero.png",
+  headingColor: "text-white",
+  subheadingColor: "text-white",
+};
+---
 
+<Layout title="Bitshala Cohorts" headerProps={headerProps}>
   <CohortCard />
   <Checkerboard />
   <CollapseList
@@ -48,5 +47,4 @@ const faqConfig = [
     client:visible
   />
   <Carousel client:visible />
-  <Footer />
 </Layout>
diff --git a/src/pages/cohorts/lbtcl.astro b/src/pages/cohorts/lbtcl.astro
@@ -1,23 +1,20 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import Header from "../../components/common/Header.astro";
 import Carousel from "../../components/common/Carousel";
-import Footer from "../../components/common/Footer.astro";
 import Description from "../../components/cohortPages/Description.astro";
 import CohortStructure from "../../components/cohortPages/CohortStructure.astro";
 import CohortDetails from "../../components/cohortPages/CohortDetails.astro";
 import Syllabus from "../../components/cohortPages/Syllabus.astro";
+const headerProps = {
+  heading: "",
+  subheading: "",
+  image: "/website-v2/cohort/lbtcl.png",
+  headingColor: "text-black",
+  subheadingColor: "text-white",
+};
 ---
 
-<Layout title="LBTCL Cohort">
-  <Header
-    heading=""
-    subheading=""
-    image="/website-v2/cohort/lbtcl.png"
-    headingColor="text-black"
-    subheadingColor="text-white"
-  />
-
+<Layout title="LBTCL Cohort" headerProps={headerProps}>
   <Description
     takeaways={[
       {
@@ -174,4 +171,3 @@ import Syllabus from "../../components/cohortPages/Syllabus.astro";
 />
 <CohortStructure />
 <Carousel client:visible />
-<Footer />
diff --git a/src/pages/cohorts/mb.astro b/src/pages/cohorts/mb.astro
@@ -1,23 +1,20 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import Header from "../../components/common/Header.astro";
 import Carousel from "../../components/common/Carousel";
-import Footer from "../../components/common/Footer.astro";
 import Description from "../../components/cohortPages/Description.astro";
 import CohortStructure from "../../components/cohortPages/CohortStructure.astro";
 import CohortDetails from "../../components/cohortPages/CohortDetails.astro";
 import Syllabus from "../../components/cohortPages/Syllabus.astro";
+const headerProps = {
+  heading: "",
+  subheading: "",
+  image: "/website-v2/cohort/lbtcl.png",
+  headingColor: "text-black",
+  subheadingColor: "text-white",
+};
 ---
 
-<Layout title="Mastering Bitcoin">
-  <Header
-    heading=""
-    subheading=""
-    image="/website-v2/cohort/masteringBitcoin.png"
-    headingColor="text-black"
-    subheadingColor="text-white"
-  />
-
+<Layout title="Mastering Bitcoin" headerProps={headerProps}>
   <Description
     takeaways={[
       {
@@ -124,4 +121,3 @@ import Syllabus from "../../components/cohortPages/Syllabus.astro";
 />
 <CohortStructure />
 <Carousel client:visible />
-<Footer />
diff --git a/src/pages/cohorts/pb.astro b/src/pages/cohorts/pb.astro
@@ -1,23 +1,24 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import Header from "../../components/common/Header.astro";
 import Carousel from "../../components/common/Carousel";
-import Footer from "../../components/common/Footer.astro";
 import Description from "../../components/cohortPages/Description.astro";
 import CohortStructure from "../../components/cohortPages/CohortStructure.astro";
 import CohortDetails from "../../components/cohortPages/CohortDetails.astro";
 import Syllabus from "../../components/cohortPages/Syllabus.astro";
----
 
-<Layout title="Programming Bitcoin">
-  <Header
-    heading=""
-    subheading=""
-    image="/website-v2/cohort/lbtcl.png"
-    headingColor="text-black"
-    subheadingColor="text-white"
-  />
+const headerProps = {
+  heading: "",
+  subheading: "",
+  image: "/website-v2/cohort/lbtcl.png",
+  headingColor: "text-black",
+  subheadingColor: "text-white",
+};
+---
 
+<Layout
+  title="Programming Bitcoin"
+  headerProps={headerProps}
+>
   <Description
     takeaways={[
       {
@@ -136,4 +137,3 @@ import Syllabus from "../../components/cohortPages/Syllabus.astro";
 />
 <CohortStructure />
 <Carousel client:visible />
-<Footer />