feat: add Guides page#113
Open
BIA3IA wants to merge 15 commits into
Open
Conversation
Contributor
WalkthroughAdds Hero and Pill UI primitives, a reusable CardResource and CardText, a new responsive Guides page (desktop and mobile variants), replaces inline headers with Hero in two pages, updates grid breakpoint modifiers, and removes the CarouselMock module. ChangesGuides Page & Components
Possibly related PRs
Suggested labels
🚥 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
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
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
…yNews, and Deprecated pages
… CardCaption in GuidePage
BIA3IA
added
the
status: blocked
![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: 8
♻️ Duplicate comments (1)
src/components/projects/deprecated.tsx (1)
50-50:⚠️ Potential issue | 🔴 Critical | ⚡ Quick winVerify that
1xl:is a defined Tailwind breakpoint.The class
1xl:grid-cols-4uses a1xl:breakpoint prefix that is not part of Tailwind's standard breakpoint set (sm, md, lg, xl, 2xl). If1xlis not defined as a custom breakpoint in your Tailwind configuration, this utility class will be ignored and the grid will remain at 2 columns on all screen sizes.This is the same issue flagged in
collection.tsxline 86. Please verify that1xlis defined in your Tailwind configuration, or update to use a standard breakpoint likexl:or2xl:.🤖 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/projects/deprecated.tsx` at line 50, The grid class uses a nonstandard breakpoint prefix `1xl:grid-cols-4` (seen in the JSX string in deprecated.tsx and similarly in collection.tsx), which will be ignored unless you have a custom `1xl` in your Tailwind config; either update these classnames to a standard breakpoint such as `xl:grid-cols-4` or `2xl:grid-cols-4`, or confirm and document that `1xl` is declared in your Tailwind `theme.screens` so the utility is applied correctly.
🧹 Nitpick comments (2)
src/app/guides/page.tsx (2)
82-82: ⚡ Quick winIcon choice semantically mismatched.
FiLogInis a login/sign-in icon, but it's used for "Trova le guide del tuo corso" (Find guides for your course). Consider using a more semantically appropriate icon likeFiBook,FiFileText, orFiSearch.💡 Suggested icons
-import { FiLogIn } from "react-icons/fi" +import { FiBook } from "react-icons/fi" const guidesMobile = { title: "Trova le guide del tuo corso", caption: "Una raccolta di guide scritte dagli studenti del tuo corso", - icon: FiLogIn, + icon: FiBook, }🤖 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/app/guides/page.tsx` at line 82, The icon FiLogIn used for the "Trova le guide del tuo corso" card is semantically incorrect; replace FiLogIn with a more appropriate icon (e.g., FiBook, FiFileText, or FiSearch) where the icon is assigned (the object/prop setting icon: FiLogIn in the page component), update the import to import the chosen icon and remove FiLogIn if unused, and ensure the UI uses the new icon symbol in the same place that currently references FiLogIn.
39-68: Mock data contains identical placeholder descriptions.All three guide entries use the same truncated description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...". This appears to be placeholder content. Ensure unique, descriptive content is added before production.
🤖 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/app/guides/page.tsx` around lines 39 - 68, The three guide objects with titles "Chimica Generale", "Chimica", and "Generale" currently share identical placeholder descriptions; replace these truncated placeholders in the guides array (the objects that include title/description/tag/author/date/href) with unique, descriptive copy for each entry that accurately reflects the guide content and length expected in production, ensuring the description strings are meaningful and localized where appropriate before shipping.
🤖 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/app/guides/page.tsx`:
- Around line 37-77: The guidesInfoMobile array currently sets every guide's
href to "/guides", causing links to reload the current page; update each object
in guidesInfoMobile (type CardResourceProps) to use the correct destination for
each guide (e.g., unique slugs or detail paths like "/guides/chimica-generale",
"/guides/chimica-2-anno", etc.) so the Card or Link component navigates to the
intended guide detail pages; ensure href values are consistent with your routing
convention and any Link/Nav components that consume CardResourceProps.
In `@src/components/card-resource/index.tsx`:
- Around line 33-42: The bookmark toggle button lacks an accessible label;
update the button in the component that uses setBookmarked and bookmarked (the
button rendering FiBookmark) to include an aria-label reflecting the current
state (e.g., "Add bookmark" when bookmarked is false and "Remove bookmark" when
bookmarked is true) and/or aria-pressed={bookmarked} so screen readers can
understand its purpose and state; ensure the label text is computed from the
bookmarked state and remains in sync with the onClick handler that calls
setBookmarked.
- Around line 27-31: The map over (Array.isArray(tag) ? tag : [tag]) uses t.text
as the React key which can collide for tags with identical text; update the key
on the <Pill> inside that map to a unique value (e.g., combine t.text and
t.variant like `${t.text}-${t.variant}`) or, if the tag list is strictly static,
fall back to the map index; ensure the change is applied where the Pill is
rendered so keys are stable and unique.
- Line 24: Replace the native anchor with Next.js client-side routing by
importing Link and using it instead of the <a> tag in the CardResource
component: remove the <a href={href} className="flex h-full flex-col"> usage and
wrap the card content with <Link href={href}> applying the same className (and
pass any child elements) so Next's prefetching and client-side navigation are
used; ensure Link is imported from "next/link" at the top of the file.
In `@src/components/card-resource/types.ts`:
- Line 15: The href prop is optional but used unconditionally in the anchor,
producing invalid links; make href required by changing the prop definition from
href?: string to href: string in the Card resource props type (the type declared
in types.ts), then update all components/call sites that instantiate this card
to pass a valid href; alternatively, if you prefer optional behavior, update the
CardResource component to only render the <a href={...}> when href is defined or
fall back to a safe no-op (e.g., render a <div> or use '#'/role="link"), but the
simplest fix is to make href non-optional and ensure callers provide it.
In `@src/components/card-text.tsx`:
- Line 6: The CardContent element's responsive typography class has a typo:
change the class string on CardContent that currently contains
"sm:typo-hedline-small" to the correct "sm:typo-headline-small" so the
small-screen typography rule in the CardText component applies properly.
In `@src/components/guides/content-mobile.tsx`:
- Around line 9-11: The current list rendering uses guide.title as the React key
in guides.map when returning <CardResource key={guide.title} {...guide} />,
which can produce duplicate keys; update the mapper to use a stable unique
identifier from the guide object (e.g., guide.id or guide.href) as the key,
falling back to the array index only if no unique id exists, so locate the
guides.map(...) expression and replace guide.title with the chosen unique
property (or with the index fallback).
In `@src/components/guides/content.tsx`:
- Around line 13-15: The current JSX in guides.map uses guide.text as the React
key which can collide; change the key to a stable unique identifier by adding
and using guide.id in the guide type (update GuideContentProps / guide object to
include id and then use key={guide.id} on the CardText), or if you cannot add
ids immediately use the map index as a fallback (key={`${guide.text}-${index}`
or key={index}) inside the guides.map call that renders CardText to ensure keys
are unique and stable across renders.
---
Duplicate comments:
In `@src/components/projects/deprecated.tsx`:
- Line 50: The grid class uses a nonstandard breakpoint prefix `1xl:grid-cols-4`
(seen in the JSX string in deprecated.tsx and similarly in collection.tsx),
which will be ignored unless you have a custom `1xl` in your Tailwind config;
either update these classnames to a standard breakpoint such as `xl:grid-cols-4`
or `2xl:grid-cols-4`, or confirm and document that `1xl` is declared in your
Tailwind `theme.screens` so the utility is applied correctly.
---
Nitpick comments:
In `@src/app/guides/page.tsx`:
- Line 82: The icon FiLogIn used for the "Trova le guide del tuo corso" card is
semantically incorrect; replace FiLogIn with a more appropriate icon (e.g.,
FiBook, FiFileText, or FiSearch) where the icon is assigned (the object/prop
setting icon: FiLogIn in the page component), update the import to import the
chosen icon and remove FiLogIn if unused, and ensure the UI uses the new icon
symbol in the same place that currently references FiLogIn.
- Around line 39-68: The three guide objects with titles "Chimica Generale",
"Chimica", and "Generale" currently share identical placeholder descriptions;
replace these truncated placeholders in the guides array (the objects that
include title/description/tag/author/date/href) with unique, descriptive copy
for each entry that accurately reflects the guide content and length expected in
production, ensuring the description strings are meaningful and localized where
appropriate before shipping.
🪄 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: cb7d3d54-81cd-4810-970a-2325e1da673c
📒 Files selected for processing (14)
src/app/associations/page.tsxsrc/app/guides/page.tsxsrc/components/card-resource/index.tsxsrc/components/card-resource/types.tssrc/components/card-text.tsxsrc/components/guides/content-mobile.tsxsrc/components/guides/content.tsxsrc/components/guides/types.tssrc/components/home/carousel-mock.tsxsrc/components/projects/collection.tsxsrc/components/projects/community-news.tsxsrc/components/projects/deprecated.tsxsrc/components/ui/hero.tsxsrc/components/ui/pill.tsx
💤 Files with no reviewable changes (1)
- src/components/home/carousel-mock.tsx
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
src/components/card-resource/index.tsx (1)
29-29:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winReact key collision risk remains.
Using
t.textas the key can still produce duplicate-key warnings if multiple tags share identical text (even with different variants). The past review suggested combining text and variant or using the index.🔑 Suggested fix: unique composite key
- {(Array.isArray(tag) ? tag : [tag]).map((t) => ( - <Pill key={t.text} variant={t.variant}> + {(Array.isArray(tag) ? tag : [tag]).map((t) => ( + <Pill key={`${t.text}-${t.variant}`} variant={t.variant}> {t.text} </Pill>🤖 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/card-resource/index.tsx` at line 29, The Pill elements use a non-unique key (key={t.text}), which can collide when different tags share the same text; update the key on the Pill inside the map (the element rendering Pill) to a unique composite value such as combining t.text and t.variant (e.g., `${t.text}-${t.variant}`) or include the map index as a fallback to guarantee uniqueness for each Pill.
🤖 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.
Duplicate comments:
In `@src/components/card-resource/index.tsx`:
- Line 29: The Pill elements use a non-unique key (key={t.text}), which can
collide when different tags share the same text; update the key on the Pill
inside the map (the element rendering Pill) to a unique composite value such as
combining t.text and t.variant (e.g., `${t.text}-${t.variant}`) or include the
map index as a fallback to guarantee uniqueness for each Pill.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 347358b4-ff1c-40b5-93fe-e14b9bbc4fef
📒 Files selected for processing (3)
src/components/card-resource/index.tsxsrc/components/card-resource/types.tssrc/components/card-text.tsx
✅ Files skipped from review due to trivial changes (1)
- src/components/card-text.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.
Closes #88
Closes #89
Closes #90