Merge pull request #19 from raihahahan/week-10-raihan

Week 10 tasks (sorry for delay)

package.json

@@ -13,7 +13,8 @@
     "firebase": "^10.13.0",
     "next": "14.2.6",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "react-icons": "^5.3.0"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/faq/page.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import FaqAccordion, { mockData } from "../../components/faq/FAQAccordian";
+import Image from "next/image";
+
+export default function Page() {
+  return (
+    <>
+      <div className="bg-white p-24 min-h-screen">
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "space-between",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "space-between",
+            }}
+          >
+            <h1 className="text-9xl text-black font-bold mb-8">
+              <div className="[text-shadow:_2px_3px_4px_#AAAAAA]">FAQs</div>
+            </h1>
+            <h2
+              className="text-7xl mb-8 font-bold"
+              style={{ color: "#6c93d6" }}
+            >
+              Opening Ceremony
+            </h2>
+          </div>
+          <Image
+            src="/HomeLogoFull.png"
+            alt="Fintech Summit Logo"
+            width={500}
+            height={500}
+            className="mb-8"
+          />
+        </div>
+        <FaqAccordion items={mockData.openingCeremony} />
+        <h2
+          className="text-7xl mb-8 mt-8 font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Hackathon
+        </h2>
+        <FaqAccordion items={mockData.hackathon} />
+        <h2
+          className="text-7xl mb-8 mt-8 font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Workshops
+        </h2>
+        <FaqAccordion items={mockData.workshops} />
+        <h2
+          className="text-7xl mb-8  mt-8 font-bold"
+          style={{ color: "#6c93d6" }}
+        >
+          Demo day
+        </h2>
+        <FaqAccordion items={mockData.demo} />
+      </div>
+    </>
+  );
+}

src/components/faq/FAQAccordian.tsx

@@ -0,0 +1,75 @@
+"use client";
+import { useState } from "react";
+import { FaPlus, FaMinus, FaMinusCircle, FaPlusCircle } from "react-icons/fa";
+import { FAQItemProps } from "./FAQItem";
+
+export const FaqAccordion = ({ items }: { items: FAQItemProps[] }) => {
+  const [activeIndex, setActiveIndex] = useState<number | null>(null);
+
+  const handleClick = (index: number) => {
+    setActiveIndex(index === activeIndex ? null : index);
+  };
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => (
+        <div
+          key={index}
+          style={{ backgroundColor: "#dee6f2" }}
+          className="rounded-lg p-8 shadow-sm"
+        >
+          <div
+            className="flex items-center justify-between cursor-pointer"
+            onClick={() => handleClick(index)}
+          >
+            <div className="flex items-center space-x-2">
+              <span className="text-gray-400 font-bold text-lg">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <h3 className="text-black text-lg font-semibold">
+                {item.question}
+              </h3>
+            </div>
+            <span className="text-gray-500">
+              {activeIndex === index ? (
+                <FaMinusCircle size={24} />
+              ) : (
+                <FaPlusCircle size={24} />
+              )}
+            </span>
+          </div>
+          {activeIndex === index && (
+            <div className="mt-2 text-gray-600">{item.answer}</div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const mockData: Record<
+  "openingCeremony" | "hackathon" | "workshops" | "demo",
+  FAQItemProps[]
+> = {
+  openingCeremony: [
+    { question: "When is the Opening Ceremony?", answer: "Insert answer here" },
+    {
+      question: "Where is the Opening Ceremony?",
+      answer: "Insert answer here",
+    },
+  ],
+  hackathon: [
+    { question: "When is the Hackathon?", answer: "Insert answer here" },
+    { question: "Where is the Hackathon?", answer: "Insert answer here" },
+  ],
+  workshops: [
+    { question: "When is the Workshop?", answer: "Insert answer here" },
+    { question: "Where is the Workshop?", answer: "Insert answer here" },
+  ],
+  demo: [
+    { question: "When is the Demo?", answer: "Insert answer here" },
+    { question: "Where is the Demo?", answer: "Insert answer here" },
+  ],
+};
+
+export default FaqAccordion;

src/components/faq/FAQItem.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React from "react";
 
-interface FAQItemProps {
+export interface FAQItemProps {
   question: string;
   answer: string;
 }
@@ -14,4 +14,4 @@ const FAQItem: React.FC<FAQItemProps> = ({ question, answer }) => {
   );
 };
 
-export default FAQItem;
+export default FAQItem;