feat: build accordion component, build donations page FAQs

package-lock.json

@@ -44,6 +44,7 @@
         "node-sass": "^7.0.1",
         "prisma": "^3.12.0",
         "react": "^18.0.0",
+        "react-accessible-accordion": "^5.0.0",
         "react-confetti": "^6.0.1",
         "react-copy-to-clipboard": "^5.1.0",
         "react-datepicker": "^4.7.0",
@@ -58670,6 +58671,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-accessible-accordion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-accessible-accordion/-/react-accessible-accordion-5.0.0.tgz",
+      "integrity": "sha512-MT2obYpTgLIIfPr9d7hEyvPB5rg8uJcHpgA83JSRlEUHvzH48+8HJPvzSs+nM+XprTugDgLfhozO5qyJpBvYRQ==",
+      "peerDependencies": {
+        "react": "^16.3.2 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.3.3 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",
@@ -111124,6 +111134,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-accessible-accordion": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/react-accessible-accordion/-/react-accessible-accordion-5.0.0.tgz",
+      "integrity": "sha512-MT2obYpTgLIIfPr9d7hEyvPB5rg8uJcHpgA83JSRlEUHvzH48+8HJPvzSs+nM+XprTugDgLfhozO5qyJpBvYRQ==",
+      "requires": {}
+    },
     "react-app-polyfill": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz",

package.json

@@ -39,6 +39,7 @@
     "node-sass": "^7.0.1",
     "prisma": "^3.12.0",
     "react": "^18.0.0",
+    "react-accessible-accordion": "^5.0.0",
     "react-confetti": "^6.0.1",
     "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "^4.7.0",

src/Components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,49 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Accordion from './Accordion';
+
+export default {
+    title: 'Shared/Accordion',
+    component: Accordion,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof Accordion>;
+
+const items = [
+    {
+        heading: "What is BOLT.FUN ??",
+        content: <p className='text-body4 text-gray-600'>
+            Exercitation in fugiat est ut ad ea cupidatat ut in
+            cupidatat occaecat ut occaecat consequat est minim minim
+            esse tempor laborum consequat esse adipisicing eu
+            reprehenderit enim.
+        </p>
+    },
+    {
+        heading: "What Do we do ??",
+        content: <p className='text-body4 text-gray-600'>
+            Exercitation in fugiat est ut ad ea cupidatat ut in
+            cupidatat occaecat ut occaecat consequat est minim minim
+            esse tempor laborum consequat esse adipisicing eu
+            reprehenderit enim.
+        </p>
+    },
+    {
+        heading: "Who is working on BOLT.FUN ??",
+        content: <p className='text-body4 text-gray-600'>
+            Exercitation in fugiat est ut ad ea cupidatat ut in
+            cupidatat occaecat ut occaecat consequat est minim minim
+            esse tempor laborum consequat esse adipisicing eu
+            reprehenderit enim.
+        </p>
+    },
+]
+
+
+const Template: ComponentStory<typeof Accordion> = (args) => <div className="bg-white px-24 rounded-16"><Accordion {...args as any} >Accordion</Accordion></div>
+
+export const Default = Template.bind({});
+Default.args = {
+    items
+}

src/Components/Accordion/Accordion.tsx

@@ -0,0 +1,54 @@
+import React, { ReactNode } from 'react';
+import {
+    Accordion as AccordionContainer,
+    AccordionItem,
+    AccordionItemHeading,
+    AccordionItemButton,
+    AccordionItemPanel,
+    AccordionItemState,
+} from 'react-accessible-accordion';
+import { FiChevronDown } from 'react-icons/fi';
+
+
+interface Props {
+    items: Array<{
+        id?: string | number
+        heading: ReactNode,
+        content: ReactNode,
+    }>,
+    classes?: Partial<{
+        item: string
+        heading: string;
+        content: string;
+        button: string;
+    }>
+}
+
+
+export default function Accordion({ items, classes }: Props) {
+    return (
+        <AccordionContainer allowZeroExpanded allowMultipleExpanded>
+            {items.map((item, idx) => <AccordionItem key={item.id ?? idx} className={` border-b ${classes?.item}`}>
+                <AccordionItemHeading>
+                    <AccordionItemButton
+                        className={`py-20 flex items-center text-body2 font-bolder ${classes?.heading}`}
+                    >
+                        {item.heading}
+                        <AccordionItemState>
+                            {({ expanded }) =>
+                                <button className={`
+                        rounded-10 flex-shrink-0 ml-auto text-gray-600 w-32 h-32 flex justify-center items-center 
+                        ${expanded ? "bg-gray-100 hover:bg-gray-200" : 'hover:bg-gray-200 '}
+                        ${classes?.button}`}>
+                                    <FiChevronDown className={`${expanded ? "rotate-180" : "rotate-0"} transition-transform`} />
+                                </button>}
+                        </AccordionItemState>
+                    </AccordionItemButton>
+                </AccordionItemHeading>
+                <AccordionItemPanel className={`pb-20 ${classes?.content}`}>
+                    {item.content}
+                </AccordionItemPanel>
+            </AccordionItem>)}
+        </AccordionContainer>
+    );
+}

src/features/Donations/pages/DonatePage/DonatePage.tsx

@@ -1,12 +1,57 @@
-
+import Accordion from "src/Components/Accordion/Accordion";
+import Header from "./Header/Header";
+import styles from './styles.module.scss'
 
 export default function DonatePage() {
 
     return (
         <div
-            className={`page-container pt-16 w-full`}
+            className={`w-full`}
         >
-
+            <Header />
+            <div className={`${styles.faq}`}>
+                <div>
+                    <h2 className="text-h3 font-bolder mb-32">
+                        FAQs
+                    </h2>
+                    <Accordion
+                        items={[
+                            {
+                                heading: "How are donations spent?",
+                                content: <p className="whitespace-pre-line">
+                                    Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
+                                    <br />
+                                    Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
+                                </p>
+                            },
+                            {
+                                heading: "Who is working on BOLT🔩FUN?",
+                                content: <p className="whitespace-pre-line">
+                                    Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
+                                    <br />
+                                    Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
+                                </p>
+                            },
+                            {
+                                heading: "How can makers win prizes?",
+                                content: <p className="whitespace-pre-line">
+                                    Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
+                                    <br />
+                                    Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
+                                </p>
+                            },
+                            {
+                                heading: "How can I donate?",
+                                content: <p className="whitespace-pre-line">
+                                    Shock the Web is a virtual hackathon to promote, explore, build and design web applications that can interact with WebLN enabled wallets and browsers. We want to make building on bitcoin more accessible to the masses of web developers out there.
+                                    <br />
+                                    Bitcoin development can seem scary for new developers coming in, but it doesn't have to be. With the lightning network's toolkit and libraries a bunch of new opportunities are waiting to be explored. We hope these hackathons can be a chance for you to preview what is possible on bitcoin and the lightning network by fostering collaboration, hopefully shortening (or easing) any developer onboarding time, and helping you connect with other bitcoiners in a fun and friendly space.
+                                </p>
+                            },
+                        ]}
+                    />
+                </div>
+            </div>
         </div>
     )
 }

src/features/Donations/pages/DonatePage/Header/Header.tsx

@@ -5,22 +5,24 @@ import styles from './styles.module.scss'
 export default function Header() {
     return (
         <div className={`${styles.header}`}>
-            <div className="flex items-center gap-24 flex-col md:flex-row">
-                <div>
-                    <h1 className="text-[54px] font-bolder">
-                        Donate
-                    </h1>
-                    <p className='text-h3 font-bolder mt-24'>
-                        Help fund <span className="text-primary-600">BOLT🔩FUN</span>, as well as other <span className="text-primary-600">Makers</span> working on lightning apps through tournaments and prize pools
-                    </p>
+            <div>
+                <div className="flex items-center gap-24 flex-col md:flex-row">
+                    <div>
+                        <h1 className="text-[54px] font-bolder">
+                            Donate
+                        </h1>
+                        <p className='text-h3 font-bolder mt-24'>
+                            Help fund <span className="text-primary-600">BOLT🔩FUN</span>, as well as other <span className="text-primary-600">Makers</span> working on lightning apps through tournaments and prize pools
+                        </p>
+                    </div>
+                    <div className="max-w-[326px]">
+                        <DonateCard />
+                    </div>
                 </div>
-                <div className="max-w-[326px]">
-                    <DonateCard />
+                <div className="mt-52 md:mt-80">
+                    <DonationStats />
                 </div>
             </div>
-            <div className="mt-52 md:mt-80">
-                <DonationStats />
-            </div>
         </div>
     )
 }

src/features/Donations/pages/DonatePage/Header/styles.module.scss

@@ -1,14 +1,16 @@
 @import "/src/styles/mixins";
 
 .header {
-  padding: 56px 24px;
+  padding: 56px 0;
   background: #ffecf9;
   background: linear-gradient(40deg, white -5%, #ffb7d963 74%, #e3faff61 100%);
 
+  display: grid;
+  grid-template-areas: ". content .";
+  grid-template-columns: minmax(16px, 1fr) minmax(auto, 910px) minmax(16px, 1fr);
+
   & > div {
-    max-width: calc(min(100%, 910px));
-    margin-left: auto;
-    margin-right: auto;
+    grid-area: content;
   }
 
   @include gt-md {

src/features/Donations/pages/DonatePage/styles.module.scss

@@ -0,0 +1,16 @@
+@import "/src/styles/mixins";
+
+.faq {
+  padding: 40px 0;
+  display: grid;
+  grid-template-areas: ". content .";
+  grid-template-columns: minmax(16px, 1fr) minmax(auto, 910px) minmax(16px, 1fr);
+
+  & > div {
+    grid-area: content;
+  }
+
+  @include gt-md {
+    padding: 80px 0;
+  }
+}