Merge pull request #48 from Bitshala/collapse-list

[Review] List of Videos
Bitshala · Nov 25, 2023 · fe1903f · fe1903f
2 parents 4337c1e + b0af30a
commit fe1903f
Show file tree

Hide file tree

Showing 6 changed files with 151 additions and 82 deletions.
diff --git a/src/components/CollapseList.tsx b/src/components/CollapseList.tsx
@@ -0,0 +1,66 @@
+import Collapse from "@mui/material/Collapse";
+import { useState } from "react";
+
+export const CollapseList = ({
+  header,
+  listConfig,
+  disableClick = false,
+}: {
+  header: string;
+  listConfig: { q: any; a: any }[];
+  disableClick?: boolean;
+}) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const handleElementClick = (index: number) => {
+    if (!disableClick) {
+      if (activeIndex == index) {
+        setActiveIndex(-1);
+      } else {
+        setActiveIndex(index);
+      }
+    }
+  };
+  return (
+    <>
+      <div className="mb-12 mt-6 text-5xl font-bold">
+        {header}
+      </div>
+      <hr className="mb-8 border-spacing-12 border-dashed" />
+      <ul>
+        {listConfig.map((el, index) => {
+          return (
+            <li key={el.q} className="text-2xl">
+              <button
+                className="flex h-full w-full items-center justify-between p-4"
+                onClick={() => handleElementClick(index)}
+              >
+                {el.q}
+                {!disableClick && (
+                  <div
+                    className={` hidden text-3xl transition-transform lg:block ${
+                      activeIndex == index
+                        ? `rotate-45`
+                        : ``
+                    }`}
+                  >
+                    +
+                  </div>
+                )}
+              </button>
+              <Collapse
+                in={activeIndex == index}
+                timeout="auto"
+                unmountOnExit
+              >
+                <div className="flex justify-between p-4">
+                  {el.a}
+                </div>
+              </Collapse>
+              <hr className="my-8 border-spacing-12 border-dashed" />
+            </li>
+          );
+        })}
+      </ul>
+    </>
+  );
+};
diff --git a/src/components/Faq.tsx b/src/components/Faq.tsx
diff --git a/src/components/videoList.tsx b/src/components/videoList.tsx
@@ -0,0 +1,49 @@
+import { CollapseList } from "./CollapseList";
+
+const videoConfig = [
+  {
+    title:
+      "Mini-script support in Output Descriptors (Part 1)",
+    img: "https://i.ytimg.com/vi/EYPfGw9Z14w/hqdefault.jpg",
+  },
+  {
+    title:
+      "Mini-script support in Output Descriptors (Part 1)",
+    img: "https://i.ytimg.com/vi/EYPfGw9Z14w/hqdefault.jpg",
+  },
+  {
+    title:
+      "Mini-script support in Output Descriptors (Part 1)",
+    img: "https://i.ytimg.com/vi/EYPfGw9Z14w/hqdefault.jpg",
+  },
+  {
+    title:
+      "P2P: Kkip netgroup diversity of new connections for tor/i2p/cjdns P2P: Kkip netgroup diversity of new connections for tor/i2p/cjdns",
+    img: "https://i.ytimg.com/vi/EYPfGw9Z14w/hqdefault.jpg",
+  },
+  {
+    title:
+      "Mini-script support in Output Descriptors (Part 1)",
+    img: "https://i.ytimg.com/vi/EYPfGw9Z14w/hqdefault.jpg",
+  },
+];
+
+export const VideoList = () => {
+  return (
+    <CollapseList
+      header="Checkout our videos of the previous PR reviews"
+      listConfig={videoConfig.map((vid) => {
+        return {
+          q: (
+            <div className="flex items-center text-left">
+              <img className=" mr-5 h-24" src={vid.img} />
+              {vid.title}
+            </div>
+          ),
+          a: null,
+        };
+      })}
+      disableClick
+    />
+  );
+};
diff --git a/src/pages/cohort.astro b/src/pages/cohort.astro
@@ -5,7 +5,34 @@ import CohortCard from "../components/CohortCard.astro";
 import Footer from "../components/Footer.astro";
 import Carousel from "../components/Carousel";
 import Header from "../components/Header.astro";
-import { Faq } from "../components/Faq";
+import { CollapseList } from "../components/CollapseList";
+
+const faqConfig = [
+  {
+    q: "How does the Bitcoin Study Cohort work?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    q: "Who can join the Bitcoin Study Cohort?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    q: "Is there a fee to join the cohort?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    q: "What resources are provided to participants?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    q: "Is there a fee to join the cohort?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+  {
+    q: "What resources are provided to participants?",
+    a: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
+  },
+];
 ---
 
 <Layout title="Welcome to Bitshala">
@@ -18,7 +45,11 @@ import { Faq } from "../components/Faq";
   />
 
   <CohortCard />
-  <Faq client:only />
-  <Carousel client:only />
+  <CollapseList
+    listConfig={faqConfig}
+    header="Checkout some of the FAQs"
+    client:visible
+  />
+  <Carousel client:visible />
   <Footer />
 </Layout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -52,6 +52,5 @@ import Header from "../components/Header.astro";
   <Carousel client:visible />
   <LinkCohort />
   <People />
-
   <Footer />
 </Layout>
diff --git a/src/pages/review.astro b/src/pages/review.astro
@@ -4,6 +4,7 @@ import Footer from "../components/Footer.astro";
 import Layout from "../layouts/Layout.astro";
 import Header from "../components/Header.astro";
 import EssentialStudyMaterial from "../components/EssentialStudyMaterial.astro";
+import { VideoList } from "../components/videoList";
 ---
 
 <Layout title="PR Review Club">
@@ -15,6 +16,7 @@ import EssentialStudyMaterial from "../components/EssentialStudyMaterial.astro";
     subheadingColor="text-white"
   />
   <EssentialStudyMaterial />
+  <VideoList />
   <Carousel client:visible />
   <Footer />
 </Layout>