From 59d8e51abda6148a664d0014d46ae55a457dc7c2 Mon Sep 17 00:00:00 2001
From: emjshrx <emjshrx@gmail.com>
Date: Fri, 24 Nov 2023 13:43:58 +0530
Subject: [PATCH 1/3] refac: change faq to a generic component

---
 src/components/CollapseList.tsx | 58 ++++++++++++++++++++++++
 src/components/Faq.tsx          | 78 ---------------------------------
 src/pages/cohort.astro          | 35 ++++++++++++++-
 3 files changed, 91 insertions(+), 80 deletions(-)
 create mode 100644 src/components/CollapseList.tsx
 delete mode 100644 src/components/Faq.tsx

diff --git a/src/components/CollapseList.tsx b/src/components/CollapseList.tsx
new file mode 100644
index 0000000..28c85f9
--- /dev/null
+++ b/src/components/CollapseList.tsx
@@ -0,0 +1,58 @@
+import Collapse from "@mui/material/Collapse";
+import { useState } from "react";
+
+export const CollapseList = ({
+  header,
+  listConfig,
+}: {
+  header: string;
+  listConfig: { q: any; a: any }[];
+}) => {
+  const [activeIndex, setActiveIndex] = useState(-1);
+  const handleElementClick = (index: number) => {
+    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}
+                <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
deleted file mode 100644
index 4e98d5d..0000000
--- a/src/components/Faq.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import Collapse from "@mui/material/Collapse";
-import { useState } from "react";
-const defaultConfig = [
-  {
-    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. ",
-  },
-];
-
-export const Faq = () => {
-  const [activeIndex, setActiveIndex] = useState(-1);
-  const handleQuestionClick = (index: number) => {
-    if (activeIndex == index) {
-      setActiveIndex(-1);
-    } else {
-      setActiveIndex(index);
-    }
-  };
-  return (
-    <>
-      <div className="mb-12 mt-6 text-5xl font-bold">
-        Checkout some of the FAQs
-      </div>
-      <hr className="mb-8 border-spacing-12 border-dashed" />
-      <ul>
-        {defaultConfig.map((faq, index) => {
-          return (
-            <li key={faq.q} className="text-2xl">
-              <button
-                className="flex w-full items-center justify-between p-4"
-                onClick={() => handleQuestionClick(index)}
-              >
-                {faq.q}
-                <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">
-                  {faq.a}
-                </div>
-              </Collapse>
-              <hr className="my-8 border-spacing-12 border-dashed" />
-            </li>
-          );
-        })}
-      </ul>
-    </>
-  );
-};
diff --git a/src/pages/cohort.astro b/src/pages/cohort.astro
index 96f583a..e9f56c1 100644
--- 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 />
+  <CollapseList
+    listConfig={faqConfig}
+    header="Checkout some of the FAQs"
+    client:only
+  />
   <Carousel client:only />
   <Footer />
 </Layout>

From 47c23169098dc78c425f921745d5418df2cdbbfc Mon Sep 17 00:00:00 2001
From: emjshrx <emjshrx@gmail.com>
Date: Sat, 25 Nov 2023 10:44:38 +0530
Subject: [PATCH 2/3] fix: change load of faq

---
 src/pages/cohort.astro | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/cohort.astro b/src/pages/cohort.astro
index e9f56c1..163064b 100644
--- a/src/pages/cohort.astro
+++ b/src/pages/cohort.astro
@@ -48,8 +48,8 @@ const faqConfig = [
   <CollapseList
     listConfig={faqConfig}
     header="Checkout some of the FAQs"
-    client:only
+    client:visible
   />
-  <Carousel client:only />
+  <Carousel client:visible />
   <Footer />
 </Layout>

From b0af30a7e28aa203593878f6fcec42811f5b8c16 Mon Sep 17 00:00:00 2001
From: emjshrx <emjshrx@gmail.com>
Date: Sat, 25 Nov 2023 14:29:05 +0530
Subject: [PATCH 3/3] feat: add video list

---
 src/components/CollapseList.tsx | 30 ++++++++++++--------
 src/components/videoList.tsx    | 49 +++++++++++++++++++++++++++++++++
 src/pages/index.astro           |  1 -
 src/pages/review.astro          |  2 ++
 4 files changed, 70 insertions(+), 12 deletions(-)
 create mode 100644 src/components/videoList.tsx

diff --git a/src/components/CollapseList.tsx b/src/components/CollapseList.tsx
index 28c85f9..de453a3 100644
--- a/src/components/CollapseList.tsx
+++ b/src/components/CollapseList.tsx
@@ -4,16 +4,20 @@ 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 (activeIndex == index) {
-      setActiveIndex(-1);
-    } else {
-      setActiveIndex(index);
+    if (!disableClick) {
+      if (activeIndex == index) {
+        setActiveIndex(-1);
+      } else {
+        setActiveIndex(index);
+      }
     }
   };
   return (
@@ -31,13 +35,17 @@ export const CollapseList = ({
                 onClick={() => handleElementClick(index)}
               >
                 {el.q}
-                <div
-                  className={` hidden text-3xl transition-transform lg:block ${
-                    activeIndex == index ? `rotate-45` : ``
-                  }`}
-                >
-                  +
-                </div>
+                {!disableClick && (
+                  <div
+                    className={` hidden text-3xl transition-transform lg:block ${
+                      activeIndex == index
+                        ? `rotate-45`
+                        : ``
+                    }`}
+                  >
+                    +
+                  </div>
+                )}
               </button>
               <Collapse
                 in={activeIndex == index}
diff --git a/src/components/videoList.tsx b/src/components/videoList.tsx
new file mode 100644
index 0000000..b6fcae6
--- /dev/null
+++ 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/index.astro b/src/pages/index.astro
index bb9ef1b..5ed346a 100644
--- 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
index d88eddf..ce8feb9 100644
--- 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>