fix: Arrow Buttons Visible at Carousel Start and End Positions #473
Conversation
|
Someone is attempting to deploy a commit to the bunty's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThe Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
|
Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊 |
|
@RamakrushnaBiswal Can you please review and if this PR is well and good to merge, then merge it ASAP as tommorow is the last day for gssoc-ext |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (2)
frontend/src/components/ui/ReviewCarousel.jsx (2)
156-167: Enhance accessibility and mobile UX of the Next button.While the conditional rendering logic is correct, consider these improvements:
- Add ARIA labels for screen readers
- Replace text arrows with semantic icons (e.g., using a UI icon library)
- Increase touch target size for mobile users
{active < items.length - 1 && ( <motion.button id="next" + aria-label="Next slide" className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 right-[50px] max-sm:text-white max-sm:text-2xl max-sm:right-2" onClick={() => setActive((prev) => (prev + 1 < items.length ? prev + 1 : prev)) } whileHover={{ x: 10, color: '#00B2CA', opacity: 1 }} > - {'>>'} + <span className="max-sm:text-4xl">{'>'}</span> </motion.button> )}
168-178: Clean up Prev button implementation and improve accessibility.Similar to the Next button, enhance accessibility and mobile experience. Also remove the unnecessary space character.
{active > 0 && ( <motion.button id="prev" + aria-label="Previous slide" className=" absolute top-[40%] text-green-900 bg-none border-none text-6xl font-mono font-bold opacity-80 transition-opacity z-10 left-[50px] max-sm:text-white max-sm:text-2xl max-sm:left-2" onClick={() => setActive((prev) => (prev - 1 >= 0 ? prev - 1 : prev))} whileHover={{ x: -10, color: '#00B2CA', opacity: 1 }} > - {' '} - {'<<'} + <span className="max-sm:text-4xl">{'<'}</span> </motion.button> )}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
frontend/src/components/ui/ReviewCarousel.jsx(1 hunks)
🔇 Additional comments (1)
frontend/src/components/ui/ReviewCarousel.jsx (1)
156-178: Consider improving auto-cycling behavior at carousel boundaries.
The current implementation might create a disconnect between button visibility and auto-cycling behavior. When the carousel reaches the last item (Next button hidden) or first item (Prev button hidden), the auto-cycling continues, which could be unexpected for users.
Consider these improvements:
- Pause auto-cycling when reaching the last item
- Add visual indicators for the current position (e.g., dots)
- Add a pause/play button for user control
Let's verify the auto-cycling behavior:
RamakrushnaBiswal
merged commit 829c5d6
into
RamakrushnaBiswal:main
RamakrushnaBiswal
added
bug
Issue : #457
The "Prev" button is now conditionally rendered based on the active index. It will only appear if the active index is greater than 0 (i.e., not on the first item).
The "Next" button is conditionally rendered based on the active index. It will only appear if the active index is less than the last item (i.e., not on the last item).
Screenshots
Summary by CodeRabbit
New Features
Bug Fixes