Add Item component structure based on shadcn

[BIA3IA]

Introduce a new Item component structure along with its subcomponents

Closes #84

[coderabbitai]

Warning

Rate limit exceeded

@BIA3IA has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 47 minutes and 13 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 47 minutes and 13 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 55abee18-7cf6-4f37-9843-0d2993fd03b4

📥 Commits

Reviewing files that changed from the base of the PR and between 059d5fa and 2f60392.

📒 Files selected for processing (1)

• src/app/faqs/page.tsx

Walkthrough

This PR adds a new FAQs page component at src/app/faqs/page.tsx and a reusable Item UI component system at src/components/ui/item.tsx. The FAQs page uses the Item component to display a centered card with a call-to-action, featuring a title and action button with an icon.

Changes

Cohort / File(s)	Summary
Item UI Component src/components/ui/item.tsx	Added five new presentational React components (Item, ItemInner, ItemContent, ItemTitle, ItemActions) for composable card/container layouts with predefined styling and data slots.
FAQs Page src/app/faqs/page.tsx	Added new Next.js page component that renders a full-width layout with an Item card containing a title "Non trovi ciò che stai cercando?" and a primary action button "Esplora le Guide" with an arrow icon.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The pull request title accurately describes the main change: introducing a new Item component structure based on shadcn design patterns.
Linked Issues check	✅ Passed	The PR implements the Item component and its subcomponents as required by issue #84, and includes usage in the FAQsPage component.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing the Item component structure and its integration in the FAQsPage, with no out-of-scope modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (1)

src/app/faqs/page.tsx (1)

8-10: Add responsive horizontal padding around the card container.

On small screens the card can sit flush to viewport edges; adding px-* on the wrapper improves readability and touch comfort.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/app/faqs/page.tsx` around lines 8 - 10, The card container currently uses
a full-width wrapper ("div" with className "flex flex-col items-center py-12")
and its child "Item" which can sit flush to the viewport on small screens; add
responsive horizontal padding to the wrapper (e.g., add classes like px-4
sm:px-6 or px-4 sm:px-6 lg:px-8) so the "div" and therefore "Item" gains
consistent horizontal padding on small devices without affecting larger layouts.

🤖 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/app/faqs/page.tsx`:
- Line 17: The FiArrowUpRight icon in the FAQs page is currently announced by
screen readers and should be marked decorative; update the JSX where
FiArrowUpRight is used to add aria-hidden="true" and role="img" (or remove role
if present) and ensure it is not focusable (e.g., add focusable={false} if
applicable) so that screen readers ignore the icon next to button text; locate
the FiArrowUpRight usage in src/app/faqs/page.tsx and apply these attributes to
the component.
- Around line 15-18: The CTA "Esplora le Guide" is a Button component with no
navigation; wire it to the intended destination by replacing or wrapping the
Button with proper link semantics (e.g., Next.js Link or add an onClick that
calls router.push) so clicking the Button navigates to the guides page, ensure
you import and use the app/router or Link as appropriate, and keep the
FiArrowUpRight icon and Button props (variant, size, className) intact for
styling and accessibility.

---

Nitpick comments:
In `@src/app/faqs/page.tsx`:
- Around line 8-10: The card container currently uses a full-width wrapper
("div" with className "flex flex-col items-center py-12") and its child "Item"
which can sit flush to the viewport on small screens; add responsive horizontal
padding to the wrapper (e.g., add classes like px-4 sm:px-6 or px-4 sm:px-6
lg:px-8) so the "div" and therefore "Item" gains consistent horizontal padding
on small devices without affecting larger layouts.

🪄 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: 86cd0dff-fb2f-4493-a422-ab96cbec93d8

📥 Commits

Reviewing files that changed from the base of the PR and between 998b219 and 059d5fa.

📒 Files selected for processing (2)

• src/app/faqs/page.tsx
• src/components/ui/item.tsx