Open
Conversation
Contributor
WalkthroughAdds a foundational Card UI module with slot-based subcomponents and four new presentational card components: CardCaption, CardCourse, CardCourseGroup, and CardPathSelection. All components are strictly presentational; no side effects or runtime behavior changes introduced. Changes
Possibly related PRs
🚥 Pre-merge checks | ❌ 4❌ Failed checks (1 warning, 3 inconclusive)
✏️ 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 |
…ii/card rebase: Diubii/card onto main
* created cardCaption.tsx * Updated card-caption to use react-icons * Adjusted font sizes * Updated card-caption to use react-icons * Adjusted font sizes * chore: biome * feat: typography * aligned card.tsx between all cards * fix: homepage cards layout * chore: biome
* created cardCaption.tsx * Updated card-caption to use react-icons * Adjusted font sizes * Added path selection cards * chore: biome * Updated card-caption to use react-icons * Adjusted font sizes * Added path selection cards * chore: biome * rm: card-caption from this branch * fix: typography * fix: imports and home layout * remove: bg-background-blur
* feat: card-groups initial commit * fix: spacing between elements * chore: biome * fix: homepage layout for cards * remove: bg-background-blur * chore: biome
* feat: card-course-group initial commit * chore: biome * fix: make text and icons black * feat: added cards to homepage; feat: added bg-background-blur to the card * remove: bg-background-blur * remove: truncate class * feat: secondary variant * chore: biome * chore: biome
![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: 1
🧹 Nitpick comments (3)
src/components/card-course-group.tsx (1)
42-57: Extract duplicated action styling into one variable.The two
CardActionbranches repeat the same class computation; extracting it will simplify future style changes.Proposed patch
export function CardCourseGroup({ @@ } & VariantProps<typeof cardCourseGroupVariants>) { + const actionClassName = cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]") + return ( <Card className={cn(cardCourseGroupVariants({ secondary }))}> @@ {hasWhatsapp && ( <CardAction gradient={false} - className={cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]")} + className={actionClassName} icon={IconWhatsApp} iconSize="normal" /> )} {hasTelegram && ( <CardAction gradient={false} - className={cn("rounded-full p-3.75", secondary ? "bg-[`#51A2FF`]" : "bg-[`#74D4FF`]")} + className={actionClassName} icon={IconTelegram} iconSize="normal" /> )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/card-course-group.tsx` around lines 42 - 57, The two CardAction render branches duplicate the same className computation; extract the computed class into a local variable (e.g., actionClass) before the JSX and use it for both CardAction components so future style changes are in one place. Compute actionClass using the existing cn call and the secondary prop logic (the same expression used now for className), then replace className={cn(...)} in both CardAction usages with className={actionClass}; keep all other props (gradient, icon, iconSize) unchanged and reference hasWhatsapp and hasTelegram as before.src/components/card-path-selection.tsx (1)
12-12: TODO left in component source.Line 12 still has an inline TODO (
add hover effect). If this is post-MVP work, consider opening a follow-up issue and referencing it here.If useful, I can draft the hover-state implementation and a small issue template for it.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/card-path-selection.tsx` at line 12, Remove the inline TODO comment "//TODO: add hover effect" from the CardPathSelection component and either implement a minimal hover state now or replace the TODO with a one-line task reference to a created follow-up issue (e.g., "TODO: see ISSUE-123 for hover-state work") so the codebase contains no dangling todos; locate the comment in the CardPathSelection component (card-path-selection.tsx) and update the file to either implement the hover effect in the component's styles/JSX or annotate the TODO with the issue ID and a short note about scope (post-MVP).src/components/ui/card.tsx (1)
61-61: MakeiconSizeoptional in the prop type to match the default.
iconSizehas a runtime default of"normal"(line 58) but the type (line 61) requires it, making the API stricter than necessary.Proposed patch
-}: React.ComponentProps<"div"> & { icon: IconType; iconSize: "small" | "normal" | "large"; gradient?: boolean }) { +}: React.ComponentProps<"div"> & { icon: IconType; iconSize?: "small" | "normal" | "large"; gradient?: boolean }) {🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ui/card.tsx` at line 61, The prop type currently requires iconSize even though the component assigns a default of "normal"; make iconSize optional in the component's props type by changing the declaration for iconSize to iconSize?: "small" | "normal" | "large" so the runtime default (set near line 58) matches the TypeScript type—update the props object/type used in the function signature in src/components/ui/card.tsx (the iconSize prop) accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/components/ui/card.tsx`:
- Around line 71-73: The non-visual SVG that defines the gradient (the <svg>
using gradientId) is currently reachable by assistive tech; update that SVG to
be ignored by screen readers by adding aria-hidden="true" and
role="presentation" (and focusable="false" for IE/SVG compatibility) and remove
the <title> element so it won't be announced; locate the SVG in
src/components/ui/card.tsx around the gradientId usage and apply those
attributes and remove the title element.
---
Nitpick comments:
In `@src/components/card-course-group.tsx`:
- Around line 42-57: The two CardAction render branches duplicate the same
className computation; extract the computed class into a local variable (e.g.,
actionClass) before the JSX and use it for both CardAction components so future
style changes are in one place. Compute actionClass using the existing cn call
and the secondary prop logic (the same expression used now for className), then
replace className={cn(...)} in both CardAction usages with
className={actionClass}; keep all other props (gradient, icon, iconSize)
unchanged and reference hasWhatsapp and hasTelegram as before.
In `@src/components/card-path-selection.tsx`:
- Line 12: Remove the inline TODO comment "//TODO: add hover effect" from the
CardPathSelection component and either implement a minimal hover state now or
replace the TODO with a one-line task reference to a created follow-up issue
(e.g., "TODO: see ISSUE-123 for hover-state work") so the codebase contains no
dangling todos; locate the comment in the CardPathSelection component
(card-path-selection.tsx) and update the file to either implement the hover
effect in the component's styles/JSX or annotate the TODO with the issue ID and
a short note about scope (post-MVP).
In `@src/components/ui/card.tsx`:
- Line 61: The prop type currently requires iconSize even though the component
assigns a default of "normal"; make iconSize optional in the component's props
type by changing the declaration for iconSize to iconSize?: "small" | "normal" |
"large" so the runtime default (set near line 58) matches the TypeScript
type—update the props object/type used in the function signature in
src/components/ui/card.tsx (the iconSize prop) accordingly.
🪄 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: 18c9061f-6b8d-49fc-9473-f3348ab7ba50
📒 Files selected for processing (5)
src/components/card-caption.tsxsrc/components/card-course-group.tsxsrc/components/card-course.tsxsrc/components/card-path-selection.tsxsrc/components/ui/card.tsx
src/components/ui/card.tsx
Outdated
Comment on lines
+71
to
+73
| <svg width="0" height="0" className="absolute"> | ||
| <title>Icon gradient helper</title> | ||
| <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%"> |
Contributor
There was a problem hiding this comment.
Hide the gradient helper SVG from assistive tech.
Line 71–73 currently creates a non-visual SVG with a title; this can be announced unnecessarily by screen readers.
Proposed patch
- <svg width="0" height="0" className="absolute">
- <title>Icon gradient helper</title>
+ <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false">
<linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <svg width="0" height="0" className="absolute"> | |
| <title>Icon gradient helper</title> | |
| <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%"> | |
| <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false"> | |
| <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%"> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/components/ui/card.tsx` around lines 71 - 73, The non-visual SVG that
defines the gradient (the <svg> using gradientId) is currently reachable by
assistive tech; update that SVG to be ignored by screen readers by adding
aria-hidden="true" and role="presentation" (and focusable="false" for IE/SVG
compatibility) and remove the <title> element so it won't be announced; locate
the SVG in src/components/ui/card.tsx around the gradientId usage and apply
those attributes and remove the title element.
Contributor
There was a problem hiding this comment.
@Diubii su questa ha ragione il signor coniglio, non aggiungiamo roba usata per accessibilità a elementi puramente decorativi
Contributor
There was a problem hiding this comment.
Seems like the humans are having a chat. I'll hop back into my burrow for now. If you need me again, just tag @coderabbitai in a new comment, and I'll come hopping out!
Contributor
Author
|
Ci sarà da aggiungere l'hover effect di @BIA3IA |
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/ui/card.tsx (1)
71-73:⚠️ Potential issue | 🟡 MinorFinish the decorative SVG accessibility cleanup.
Line 72 still includes a
<title>inside the non-visual gradient helper SVG. Since this SVG is decorative, remove the title and mark it presentational to avoid assistive-tech noise.Suggested patch
- <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false"> - <title>Icon gradient helper</title> + <svg width="0" height="0" className="absolute" aria-hidden="true" role="presentation" focusable="false"> <linearGradient id={gradientId} x1="0%" y1="100%" x2="0%" y2="0%">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/components/ui/card.tsx` around lines 71 - 73, Remove the non‑visual <title> element from the decorative SVG and mark the SVG as presentational: delete the <title> line and add role="presentation" to the <svg> element (the element that uses gradientId in src/components/ui/card.tsx) while keeping aria-hidden="true" and focusable="false".
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@src/components/ui/card.tsx`:
- Around line 71-73: Remove the non‑visual <title> element from the decorative
SVG and mark the SVG as presentational: delete the <title> line and add
role="presentation" to the <svg> element (the element that uses gradientId in
src/components/ui/card.tsx) while keeping aria-hidden="true" and
focusable="false".
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: c91ffba4-2ea5-4b78-b746-071cd3ffa9b0
📒 Files selected for processing (2)
src/components/card-course-group.tsxsrc/components/ui/card.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/components/card-course-group.tsx
lorenzocorallo
approved these changes
Apr 9, 2026
toto04
requested changes
Apr 9, 2026
Contributor
toto04
left a comment
toto04
left a comment
There was a problem hiding this comment.
due commentini tanto i componenti li ho già visti nelle singole PR
| > | ||
| {gradient && ( | ||
| <svg width="0" height="0" className="absolute" aria-hidden="true" focusable="false"> | ||
| <title>Icon gradient helper</title> |
Contributor
There was a problem hiding this comment.
quello che ha detto il coniglio
Suggested change
| <title>Icon gradient helper</title> |
| <CardAction icon={Icon} iconSize="small" /> {caption} | ||
| </CardContent> | ||
| </Card> | ||
| //TODO: add hover effect |
Contributor
There was a problem hiding this comment.
Ora c'è! Aspetto che tu faccia la magia che vuoi fare per approvare
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
3 participants
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.
Closes #14