|
| 1 | +import { useState } from "react"; |
| 2 | +import { IoMdArrowDropdownCircle, IoMdArrowDropupCircle } from "react-icons/io"; |
| 3 | +import styles from "./../kelixirr/AccordionItems.module.css"; |
| 4 | +import { WiStars } from "react-icons/wi"; |
| 5 | +import Author from "../../Author"; |
| 6 | + |
| 7 | +export default function AccordionItems() { |
| 8 | + const accs = [ |
| 9 | + { |
| 10 | + id: 1, |
| 11 | + title: "Who can contribute?", |
| 12 | + content: |
| 13 | + "This project is open to anyone, regardless of experience. Whether you are just starting with React or have basic knowledge of front-end development, you can contribute. The goal is to create a collaborative learning environment where people of all skill levels can participate and grow.", |
| 14 | + }, |
| 15 | + { |
| 16 | + id: 2, |
| 17 | + title: "How do I contribute a component?", |
| 18 | + content: |
| 19 | + "To contribute a component, first, fork the repository and create a new branch for your changes. Then, you can start building the component of your choice. Once you've completed your component, ensure that it follows the project's guidelines, such as naming conventions and structure, and then submit a pull request. Don’t worry if you're unsure — there is a documentation to help you through each step.", |
| 20 | + }, |
| 21 | + { |
| 22 | + id: 3, |
| 23 | + title: "What kind of components can I contribute?", |
| 24 | + content: |
| 25 | + "You can contribute any React component that you feel comfortable building. It can be anything from a simple button, input form, or card to more complex components like modals, sliders, games, or navigation bars. Just make sure they follow our design guidelines", |
| 26 | + }, |
| 27 | + { |
| 28 | + id: 4, |
| 29 | + title: "Will my contributions be reviewed?", |
| 30 | + content: |
| 31 | + "Yes, all contributions will be reviewed by the maintainers of the project. They will check the code for correctness, ensure it meets the project's standards, and provide constructive feedback. If your contribution is accepted, it will be merged into the main codebase, and you’ll get credit for your work.", |
| 32 | + }, |
| 33 | + { |
| 34 | + id: 5, |
| 35 | + title: "Can I ask for help if I get stuck?", |
| 36 | + content: |
| 37 | + "Absolutely! This project is all about learning, so feel free to ask for help. You can open an issue in the repository", |
| 38 | + }, |
| 39 | + { |
| 40 | + id: 6, |
| 41 | + title: "How will this project help me improve my skills?", |
| 42 | + content: |
| 43 | + "Contributing to this project will help you practice key front-end skills like React, component-based architecture, and JavaScript. You'll also gain experience with version control (Git), collaboration tools, and code review processes. Plus, working on real-world projects is a great way to build your portfolio and showcase your skills to potential employers or collaborators.", |
| 44 | + }, |
| 45 | + { |
| 46 | + id: 7, |
| 47 | + title: "Will I receive credit for my contribution?", |
| 48 | + content: |
| 49 | + "Yes, all contributors will be credited for their work. Each accepted pull request will be attributed to you, and we will include your GitHub profile in the project’s contributor list. If you’re building components as part of your portfolio, this is a great way to demonstrate your involvement in an open-source project. Above all don't forget to add our Author component below your component so that people can know who created it.", |
| 50 | + }, |
| 51 | + ]; |
| 52 | + |
| 53 | + const initialState = accs.reduce((state, item) => { |
| 54 | + if (item.id === 1) { |
| 55 | + state[item.id] = true; |
| 56 | + } else { |
| 57 | + state[item.id] = false; |
| 58 | + } |
| 59 | + return state; |
| 60 | + }, {}); |
| 61 | + |
| 62 | + const [accstate, setAccState] = useState(initialState); |
| 63 | + |
| 64 | + const handleAcc = (id) => { |
| 65 | + setAccState((state) => ({ |
| 66 | + ...Object.fromEntries(Object.keys(state).map((key) => [key, false])), |
| 67 | + [id]: !state[id], |
| 68 | + })); |
| 69 | + }; |
| 70 | + |
| 71 | + return ( |
| 72 | + <> |
| 73 | + <div className={styles.AccordionContainer}> |
| 74 | + <div className={styles.Accordion}> |
| 75 | + <h3 className={styles.AccordionH3}> |
| 76 | + <WiStars /> |
| 77 | + FAQs: In Case! |
| 78 | + </h3> |
| 79 | + <ul className={styles.AccordionUl}> |
| 80 | + {accs.map((acc) => ( |
| 81 | + <li |
| 82 | + key={acc.id} |
| 83 | + onClick={() => handleAcc(acc.id)} |
| 84 | + className={`${styles.AccordionUlLi} ${ |
| 85 | + accstate[acc.id] ? styles.activeLi : "" |
| 86 | + }`} |
| 87 | + > |
| 88 | + <div className={styles.AccordionUlLiDiv}> |
| 89 | + <h3>{acc.title}</h3> |
| 90 | + {accstate[acc.id] ? ( |
| 91 | + <IoMdArrowDropupCircle /> |
| 92 | + ) : ( |
| 93 | + <IoMdArrowDropdownCircle /> |
| 94 | + )} |
| 95 | + </div> |
| 96 | + {accstate[acc.id] && <p>{acc.content}</p>} |
| 97 | + </li> |
| 98 | + ))} |
| 99 | + </ul> |
| 100 | + </div> |
| 101 | + </div> |
| 102 | + <Author name="Amritesh Kumar" githubLink="https://github.com/kelixirr" /> |
| 103 | + </> |
| 104 | + ); |
| 105 | +} |
0 commit comments