From 587c4c96a2855aae06213adf51ac2a98257dfe8c Mon Sep 17 00:00:00 2001 From: MTG2000 Date: Wed, 25 May 2022 10:37:38 +0300 Subject: [PATCH] feat: build accordion component, build donations page FAQs --- package-lock.json | 16 ++++++ package.json | 1 + .../Accordion/Accordion.stories.tsx | 49 +++++++++++++++++ src/Components/Accordion/Accordion.tsx | 54 +++++++++++++++++++ .../Donations/pages/DonatePage/DonatePage.tsx | 51 ++++++++++++++++-- .../pages/DonatePage/Header/Header.tsx | 28 +++++----- .../DonatePage/Header/styles.module.scss | 10 ++-- .../pages/DonatePage/styles.module.scss | 16 ++++++ 8 files changed, 205 insertions(+), 20 deletions(-) create mode 100644 src/Components/Accordion/Accordion.stories.tsx create mode 100644 src/Components/Accordion/Accordion.tsx create mode 100644 src/features/Donations/pages/DonatePage/styles.module.scss diff --git a/package-lock.json b/package-lock.json index b7b44bb..f4ed3e2 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f0f6a87..3a65744 100644 --- a/package.json +++ b/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", diff --git a/src/Components/Accordion/Accordion.stories.tsx b/src/Components/Accordion/Accordion.stories.tsx new file mode 100644 index 0000000..03d1d99 --- /dev/null +++ b/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; + +const items = [ + { + heading: "What is BOLT.FUN ??", + content:

+ 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. +

+ }, + { + heading: "What Do we do ??", + content:

+ 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. +

+ }, + { + heading: "Who is working on BOLT.FUN ??", + content:

+ 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. +

+ }, +] + + +const Template: ComponentStory = (args) =>
Accordion
+ +export const Default = Template.bind({}); +Default.args = { + items +} diff --git a/src/Components/Accordion/Accordion.tsx b/src/Components/Accordion/Accordion.tsx new file mode 100644 index 0000000..d164d16 --- /dev/null +++ b/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 ( + + {items.map((item, idx) => + + + {item.heading} + + {({ expanded }) => + } + + + + + {item.content} + + )} + + ); +} \ No newline at end of file diff --git a/src/features/Donations/pages/DonatePage/DonatePage.tsx b/src/features/Donations/pages/DonatePage/DonatePage.tsx index 814e836..c0ee580 100644 --- a/src/features/Donations/pages/DonatePage/DonatePage.tsx +++ b/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 (
- +
+
+
+

+ FAQs +

+ + 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. +
+ 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. +

+ }, + { + heading: "Who is working on BOLT🔩FUN?", + content:

+ 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. +
+ 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. +

+ }, + { + heading: "How can makers win prizes?", + content:

+ 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. +
+ 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. +

+ }, + { + heading: "How can I donate?", + content:

+ 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. +
+ 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. +

+ }, + ]} + /> +
+
) } diff --git a/src/features/Donations/pages/DonatePage/Header/Header.tsx b/src/features/Donations/pages/DonatePage/Header/Header.tsx index 94fabd7..1ff40b3 100644 --- a/src/features/Donations/pages/DonatePage/Header/Header.tsx +++ b/src/features/Donations/pages/DonatePage/Header/Header.tsx @@ -5,22 +5,24 @@ import styles from './styles.module.scss' export default function Header() { return (
-
-
-

- Donate -

-

- Help fund BOLT🔩FUN, as well as other Makers working on lightning apps through tournaments and prize pools -

+
+
+
+

+ Donate +

+

+ Help fund BOLT🔩FUN, as well as other Makers working on lightning apps through tournaments and prize pools +

+
+
+ +
-
- +
+
-
- -
) } diff --git a/src/features/Donations/pages/DonatePage/Header/styles.module.scss b/src/features/Donations/pages/DonatePage/Header/styles.module.scss index 50c3d97..dad6686 100644 --- a/src/features/Donations/pages/DonatePage/Header/styles.module.scss +++ b/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 { diff --git a/src/features/Donations/pages/DonatePage/styles.module.scss b/src/features/Donations/pages/DonatePage/styles.module.scss new file mode 100644 index 0000000..5505976 --- /dev/null +++ b/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; + } +}