fix:footer icons redirect to specific icon page by rejioco · Pull Request #89 · itshover/itshover

rejioco · 2026-01-16T20:34:50Z

Description

Fixed the footer Featured Icons interaction so icons no longer behave like dead elements.
Each icon now redirects to its respective icon page on click, aligning behavior with the hover animation.

Type of Change

Bug fix
New feature
New icon(s)
Documentation update

UX Note

Copying the install command directly on icon click was considered, but redirecting is more intuitive. Clicking an icon implies navigation, and the icon page already provides a clear, intentional way to copy the install command.

Issue

#86

Screen Recording

footer-icon-redirect.mp4

Checklist

Code follows project style guidelines
npm run check passes
Verified hover animations still work
Verified click redirects correctly

Summary by CodeRabbit

New Features
- Featured icons are now clickable and navigate to dedicated pages for each icon; each item includes a dedicated path.
Style
- Improved hover interactions with a subtle scale effect and better visual centering of icons.
Refactor
- Updated rendering structure for featured icons to improve interaction and accessibility (aria-labels added).

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2026-01-16T20:34:55Z

@AyushGuleria2005 is attempting to deploy a commit to the itshover's projects Team on Vercel.

A member of the Team first needs to authorize it.

coderabbitai · 2026-01-16T20:35:01Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

The footer's featured icons now include a path field and render as navigable links. Each icon item is wrapped with a Link whose href is /icons/${path} and contains a motion.span (with hover scale) that centers the icon and includes an aria-label with the icon name.

Changes

Cohort / File(s)	Summary
Featured Icons Navigation Refactor `components/footer.tsx`	Added `path` property to each featured icon item (e.g., `"<icon-name>-icon"`). Replaced `motion.div` wrappers with `Link` components containing `motion.span`; updated link `href` to `/icons/${path}` and added icon name to `aria-label`. Hover scale animation moved to the `motion.span`.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰 I hopped along the footer row,
Gave each bright icon a path to go,
Wrapped them in links with a gentle span,
Now click and bounce — that's my plan! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding navigation functionality to footer icons so they redirect to specific icon pages, which is the core objective of the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

📝 Generate docstrings

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

greptile-apps · 2026-01-16T20:36:59Z

Greptile Summary

Fixed the non-clickable Featured Icons in the footer by wrapping each icon in a Next.js Link component that redirects to /icons/{icon-path}. The hover animation was preserved by moving it from the container to a motion.span child element. Each link includes an aria-label for accessibility.

Converted static icon displays to clickable links
Preserved motion animation by nesting motion.span inside Link
Added proper aria-labels for screen readers
Added path property to each featured icon in the data structure
Updated package name from animated-icons to itshover

Confidence Score: 4/5

This PR is safe to merge with one minor path correction needed
Score reflects a simple, well-implemented UX fix with proper accessibility considerations and animation preservation. One icon path mismatch prevents a perfect score.
Fix the twitter icon path in components/footer.tsx:78 to use twitter-x-icon instead of twitter-icon

Important Files Changed

Filename	Overview
components/footer.tsx	Added clickable links to featured icons with proper aria-labels and motion animation, but Twitter icon path doesn't match imported component
package-lock.json	Updated package name from `animated-icons` to `itshover` - standard metadata update

Sequence Diagram

sequenceDiagram
    participant User
    participant Footer
    participant NextLink as Next.js Link
    participant Router as Next.js Router
    participant IconPage as Icon Detail Page

    User->>Footer: "Click on featured icon"
    Footer->>NextLink: "Trigger click event"
    NextLink->>Router: "Navigate to /icons/{path}"
    Router->>IconPage: "Load icon detail page"
    IconPage->>User: "Display icon details & install command"

greptile-apps

_{1 file reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile}

coderabbitai

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@components/footer.tsx`:
- Line 78: In the featuredIcons array in components/footer.tsx, update the entry
that uses TwitterXIcon so its path matches the icon identifier in
icons/index.ts; change the path value from "twitter-icon" to "twitter-x-icon"
(ensure the object with Icon: TwitterXIcon, name: "twitter", path:
"twitter-x-icon" is corrected) so navigation points to the TwitterXIcon detail
page.

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

fix:footer icons redirect to specific icon page

82d22e3

greptile-apps bot reviewed Jan 16, 2026

View reviewed changes

Comment thread components/footer.tsx Outdated

coderabbitai bot reviewed Jan 16, 2026

View reviewed changes

Comment thread components/footer.tsx Outdated

Update components/footer.tsx

5b976cc

Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>

Abhijit-Jha merged commit 734fd68 into itshover:master Jan 18, 2026
2 of 3 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix:footer icons redirect to specific icon page#89

fix:footer icons redirect to specific icon page#89
Abhijit-Jha merged 2 commits intoitshover:masterfrom
rejioco:footer-redirect-icon

rejioco commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Jan 16, 2026

Uh oh!

coderabbitai bot commented Jan 16, 2026 •

edited

Loading

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

greptile-apps bot commented Jan 16, 2026

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

rejioco commented Jan 16, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

UX Note

Issue

Screen Recording

Checklist

Summary by CodeRabbit

Uh oh!

vercel bot commented Jan 16, 2026

Uh oh!

coderabbitai bot commented Jan 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

greptile-apps bot commented Jan 16, 2026

Greptile Summary

Confidence Score: 4/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

rejioco commented Jan 16, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 16, 2026 •

edited

Loading