GH-118 Improve faq section. #118
Conversation
Signed-off-by: Martin Sulikowski <vLuckyyy.biznes@gmail.com>
WalkthroughThe FAQ component was updated to use one list of questions and answers, with a single state to track which answer is open. It now uses one intersection observer for the whole FAQ section instead of many for each item. Animations for the title and FAQ entries were simplified and made smoother. The FAQ acts like an accordion, letting users toggle answers easily. The component’s external interface stayed the same, with all changes made inside for cleaner code and better animation control. Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
components/faq/Faq.tsxOops! Something went wrong! :( ESLint: 9.26.0 ESLint couldn't find an eslint.config.(js|mjs|cjs) file. From ESLint v9.0.0, the default configuration file is now eslint.config.js. https://eslint.org/docs/latest/use/configure/migration-guide If you still have problems after following the migration guide, please stop by 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used🧬 Code Graph Analysis (1)components/faq/Faq.tsx (1)
🔇 Additional comments (7)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
components/faq/Faq.tsx (2)
39-58: Move variants outside the componentVariants are rebuilt on every render. Popping them outside
Faq(oruseMemo) saves a tiny bit of work.
81-85: Use a stable key
key={index}is fine for a fixed list, but switching tokey={item.question}avoids surprises if the order ever changes.
CitralFlo
changed the title
vLuckyyy
changed the title
Signed-off-by: Martin Sulikowski <vLuckyyy.biznes@gmail.com>
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (2)
components/faq/Faq.tsx (2)
87-101: 🛠️ Refactor suggestionAdd matching IDs for better accessibility
The button has
aria-expandedbut is missingaria-controlsto link it to its panel.<button onClick={() => toggleFaq(index)} className="flex w-full items-center justify-between bg-[#f0f1f2] px-6 py-4 text-left text-lg font-medium text-gray-800 transition-colors duration-300 hover:bg-[#e6e7e8] dark:bg-[#1F2A37] dark:text-white dark:hover:bg-[#374151]" aria-expanded={activeIndex === index} + aria-controls={`faq-answer-${index}`} >
102-108: 🛠️ Refactor suggestionAdd ID to answer div for accessibility
The answer div needs an ID that matches the
aria-controlsattribute on the button.<div className={`overflow-hidden transition-all duration-300 ease-in-out ${activeIndex === index ? 'max-h-96' : 'max-h-0'}`} + id={`faq-answer-${index}`} >
🧹 Nitpick comments (1)
components/faq/Faq.tsx (1)
105-106: Consider improving text contrast in light modeThe dark gray text on light background might be hard to read for some users.
- <div className="bg-[#f5f6f7] p-6 text-gray-700 dark:bg-[#1F2A37] dark:text-gray-400"> + <div className="bg-[#f5f6f7] p-6 text-gray-900 dark:bg-[#1F2A37] dark:text-gray-400">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
components/faq/Faq.tsx(1 hunks)
🔇 Additional comments (5)
components/faq/Faq.tsx (5)
8-25: Great job organizing the FAQ data!Moving all questions and answers into a single array makes the code much cleaner and easier to update.
28-32: Smart state management approachUsing a single state variable with a toggle function makes the accordion behavior easy to understand.
34-37: Nice optimization with single intersection observerUsing one observer for the whole section instead of multiple observers is more efficient.
39-58: Animation variants look good!The staggered animations will create a nice visual effect when the section comes into view.
75-111: Overall excellent refactoring!The accordion implementation is clean, interactive, and visually appealing. The code is now more maintainable and easier to extend.
Signed-off-by: Martin Sulikowski <vLuckyyy.biznes@gmail.com>
components/faq/Faq.tsx
Outdated
| { | ||
| question: "Q2: How can I join the team?", | ||
| answer: | ||
| "Join our team to learn more about GitHub workflow, understand and use good programming practices like reviewing pull requests. As a team we provide many answers to not so easy questions and everyone of us is a specialist in his own field, meaning problem solving is in our nature. You'll also be able to extend your professional network, demonstrate your skills, and partake in team game competitions. (Shhh! Don't tell anyone about open source licences) Don't hesitate, join us!", |
There was a problem hiding this comment.
Part of this should be an answer to Q3
No description provided.