feat: add icons component and improve codebase structure

[Anmol-Baranwal]

Fixes Issue

fixes #2317, fixes #2315

Changes proposed

• Created a new Icons component: components/icons.tsx

Now:

• We directly avoid any duplicate imports from the same type of category like fa, and fa6.
• Anyone can easily add it there itself (a custom svg), or any imported one.
• We can keep track of what icons are used. Plus, the icons are only loaded once so it improves the time.
• Easier to debug, and this improves the whole structure. Now we can use normal classNames to style the icons.
• Removed the assets/icons other than logo.svg
• Fixed linting errors.
• Added priority for images so that they're loaded faster.

I've properly checked from the original so that there are no visual changes but do check it from your side once.

Note to reviewers

You can see that I've kept assets/logo.svg -> I've included it in the icons component but the viewport of the logo seems to be messy which is causing the issue. So, I used the previous one.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
linkshub	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 20, 2024 6:51am

[github-actions]

Thank you, Anmol-Baranwal, for creating this pull request and contributing to LinksHub! 💗

The maintainers will review this Pull Request and provide feedback as soon as possible! 😇
We appreciate your patience and contribution, Keep up the great work! 😀

[aftabrehan]

Excellent PR, @Anmol-Baranwal 💪 🚀 💯

Category content is not taking up full space of the sidebar. Could you please help to check that?

[Anmol-Baranwal]

@aftabrehan
I can't see that unless I view the page at 65%. I've even checked in inspect.

Please check if the same issue is with the original URL, so we can solve it separately.
The problem seems to be with the fixed viewport height, or maybe the spacing of this report a bug button.

If you could provide the screen size and instructions on how to check it, I'd be able to solve it properly.

[CBID2]

LGTM

[aftabrehan]

I can't see that unless I view the page at 65%. I've even checked in inspect.

I'm using large screen and I can see that on 100%. Let me check the code if I can help.

[aftabrehan]

@Anmol-Baranwal, the issue (sidebar category height) is fixed in this commit.

[Anmol-Baranwal]

@rupali-codes @CBID2 @aftabrehan
If everything is all right, please review and merge this!

[CBID2]

LGTM

[rupali-codes]

Can we put the "Report a Bug" button at bottom-right corner? in the sidebar, there's already a lot for it.

Other than it looks pretty fine to me :)

[Anmol-Baranwal]

@rupali-codes
Should it be sticky or floating in the right corner of the screen, or just at the very end?

Should it appear on all routes, including subcategories, or only on the landing page?

Let me know, and I will change it accordingly.

[rupali-codes]

@rupali-codes Should it be sticky or floating in the right corner of the screen, or just at the very end?

Should it appear on all routes, including subcategories, or only on the landing page?

Let me know, and I will change it accordingly.

I think it should be sticky,

[Anmol-Baranwal]

@rupali-codes
I've done it. Please check!

I have kept it hidden for xs & sm. And made it slightly responsive for md.
I have also changed the hover color to white, neither red (destructive) nor theme purple was very good.

Attaching it here for reference. Let me know if you want to change it.

[rupali-codes]

Hi Anmol, please make the button sticky, currently its only showing the button on hompage, but not on the other pages.

Also, make this button it bit smaller, or maybe just remove the text and keep the icon (question mark)

[Anmol-Baranwal]

Hi Anmol, please make the button sticky, currently its only showing the button on hompage, but not on the other pages.

Also, make this button it bit smaller, or maybe just remove the text and keep the icon (question mark)

But removing the text might confuse users because it provides context. If you still want it removed, please let me know, and I'll take care of it.

Also, could you clarify what you mean by 'sticky'? Currently, it's floating (sticky) irrespective of scroll position, but are you suggesting it should be attached to the bottom of the page, visible to users as they scroll down?

[rupali-codes]

Hi Anmol, please make the button sticky, currently its only showing the button on hompage, but not on the other pages.
Also, make this button it bit smaller, or maybe just remove the text and keep the icon (question mark)

But removing the text might confuse users because it provides context. If you still want it removed, please let me know, and I'll take care of it.

Also, could you clarify what you mean by 'sticky'? Currently, it's floating (sticky) irrespective of scroll position, but are you suggesting it should be attached to the bottom of the page, visible to users as they scroll down?

For the first one, lets keep the text but make it smaller. And secondly, the button only showing on main/home page, its supposed to be shown on other pages as well, like category page and resource page.

[Anmol-Baranwal]

@rupali-codes
Done! I've created a component because we're using it in several places, and please check the styling in the light theme. I tried various options, and this one seemed appropriate. Let me know if any changes are needed.

[rupali-codes]

@Anmol-Baranwal it looks perfect, just one thing, there's a transition delay when changing the theme. And can yo try making the color voilet? ig it would look more attractive then

[Anmol-Baranwal]

@rupali-codes @aftabrehan @CBID2
The changes are done and final. Please review and merge this to avoid any conflicts.

[CBID2]

Looks great

[Anmol-Baranwal]

@rupali-codes
I've resolved conflicts if that helps!

[rupali-codes]

@Anmol-Baranwal there's a small bug, when you click on theme toggler on the resource page, and then click back on the toggler, its closing the sidebar menu

LinksHub.-.Brave.2024-04-20.12-33-02.mp4

[Anmol-Baranwal]

@Anmol-Baranwal there's a small bug, when you click on theme toggler on the resource page, and then click back on the toggler, its closing the sidebar menu

LinksHub.-.Brave.2024-04-20.12-33-02.mp4

Is this related to this PR?
It would be great if someone else can handle it in another PR.
Because this just improves the icon based system and little codebase structure (nothing related to functionality).

[rupali-codes]

@Anmol-Baranwal there's a small bug, when you click on theme toggler on the resource page, and then click back on the toggler, its closing the sidebar menu
LinksHub.-.Brave.2024-04-20.12-33-02.mp4

Is this related to this PR? It would be great if someone else can handle it in another PR. Because this just improves the icon based system and little codebase structure (nothing related to functionality).

it's not on the main side, it belongs to this PR only

[Anmol-Baranwal]

@rupali-codes
I don't see the bug and neither can I replicate it.

See the video here.

[rupali-codes]

@rupali-codes I don't see the bug and neither can I replicate it.

See the video here.

Okay then, i'm merging this PR for now,

[github-actions]

Thank you for contributing to LinksHub! Please take a moment to rate this repo's DX on EddieHub's RepoRater and give it a star ⭐