Add CommunityNews component#78
Open
BIA3IA wants to merge 15 commits into
Open
Conversation
Contributor
WalkthroughThis PR adds carousel UI infrastructure and integrates two new carousel-based features: a home page carousel mock and a projects community news section. It includes carousel component foundation with Embla integration, gradient icon sizing support, removes duplicate gradient SVG rendering from cards, and updates both the home and projects pages. ChangesCarousel UI and Community Features
Possibly related PRs
🚥 Pre-merge checks | ✅ 2 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
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. Comment |
…s' into bianca/communityNews
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/ui/carousel.tsx (2)
133-133: ⚡ Quick winAdd
aria-labelto improve carousel accessibility.The carousel section should have a descriptive label so screen reader users understand the purpose of the region.
♿ Proposed fix
- <section onKeyDownCapture={handleKeyDown} className={cn("relative", className)} data-slot="carousel" {...props}> + <section onKeyDownCapture={handleKeyDown} aria-label="Carousel" className={cn("relative", className)} data-slot="carousel" {...props}>Or allow consumers to override it via props:
-}: React.ComponentProps<"div"> & CarouselProps) { +}: React.ComponentProps<"div"> & CarouselProps & { "aria-label"?: string }) {🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/carousel.tsx` at line 133, The carousel's root <section> currently lacks an accessible name—add an aria-label (e.g., aria-label="Carousel" or a more descriptive string) to the section element rendered in the Carousel component and allow consumers to override it via props (accept e.g., ariaLabel or passthrough aria-* props), so update the component props usage to prefer the provided ariaLabel/props value and fallback to a sensible default; make changes in the render line that uses handleKeyDown, cn, className and {...props} so the aria attribute is included and can be overridden.
177-179: ⚡ Quick winAdd visible focus indicator to dot buttons.
The button uses
outline-nonebut doesn't provide an alternative focus indicator. This creates an accessibility barrier for keyboard users who cannot see which dot has focus.♿ Proposed fix
className={cn( - "flex size-5 appearance-none items-center justify-center rounded-full bg-transparent p-0 outline-none transition-colors" + "flex size-5 appearance-none items-center justify-center rounded-full bg-transparent p-0 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-white/50" )}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ui/carousel.tsx` around lines 177 - 179, The dot button currently removes the browser focus indicator via the "outline-none" class in the className passed to cn; replace that with an accessible focus style instead of removing it so keyboard users can see focus. Locate the element rendering the dot buttons (the className string containing "outline-none" in src/components/ui/carousel.tsx) and remove or narrow the use of "outline-none", adding a visible focus-visible style such as a ring/outline on focus (e.g., use focus-visible:ring, focus-visible:ring-offset, or focus-visible:outline classes with an appropriate color and offset) so the button keeps a clear visual indicator when focused while preserving hover/active styles.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/projects/community-news.tsx`:
- Around line 5-34: The communityCards constant contains placeholder data
(titles "Title 1"..."Title 4", lorem ipsum captions, and repeated FiCrop icons)
that must be replaced before production; update the communityCards array in
src/components/projects/community-news.tsx by replacing each object’s title,
caption, and icon fields with real community news content and appropriate icon
components (or dynamic props) and ensure iconPosition stays correct; keep the
array shape (the objects and the as const typing) so existing rendering logic
that references communityCards continues to work.
In `@src/components/ui/carousel.tsx`:
- Around line 150-161: The CarouselItem component is using a <fieldset> which is
semantically incorrect for non-form carousel slides; replace the fieldset with a
<div> in the CarouselItem function to correct semantics: update the JSX returned
by CarouselItem (which uses useCarousel() and sets aria-roledescription="slide"
and data-slot="carousel-item") so it renders a div with the same props,
className, aria attributes and data-slot, preserving behavior and accessibility
attributes.
- Around line 170-189: Replace the fragile key usage for carousel indicators: in
the map over scrollSnaps inside the render (the Button elements created from
scrollSnaps.map) use the stable index as the React key instead of the scrollSnap
value; update the Button's key from scrollSnap to index (the rest of the props
such as aria-label, aria-current using selectedIndex, onClick calling
api?.scrollTo(index), and the inner span logic can remain unchanged).
---
Nitpick comments:
In `@src/components/ui/carousel.tsx`:
- Line 133: The carousel's root <section> currently lacks an accessible name—add
an aria-label (e.g., aria-label="Carousel" or a more descriptive string) to the
section element rendered in the Carousel component and allow consumers to
override it via props (accept e.g., ariaLabel or passthrough aria-* props), so
update the component props usage to prefer the provided ariaLabel/props value
and fallback to a sensible default; make changes in the render line that uses
handleKeyDown, cn, className and {...props} so the aria attribute is included
and can be overridden.
- Around line 177-179: The dot button currently removes the browser focus
indicator via the "outline-none" class in the className passed to cn; replace
that with an accessible focus style instead of removing it so keyboard users can
see focus. Locate the element rendering the dot buttons (the className string
containing "outline-none" in src/components/ui/carousel.tsx) and remove or
narrow the use of "outline-none", adding a visible focus-visible style such as a
ring/outline on focus (e.g., use focus-visible:ring, focus-visible:ring-offset,
or focus-visible:outline classes with an appropriate color and offset) so the
button keeps a clear visual indicator when focused while preserving hover/active
styles.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ab530db8-60d2-456d-87d8-13c433b33b3b
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (9)
.gitignorepackage.jsonsrc/app/page.tsxsrc/app/projects/page.tsxsrc/components/gradient-icon.tsxsrc/components/home/carousel-mock.tsxsrc/components/projects/community-news.tsxsrc/components/ui/card.tsxsrc/components/ui/carousel.tsx
💤 Files with no reviewable changes (1)
- src/components/ui/card.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Introduce the CommunityNews component to display community updates
Closes #74