Create LinkedIconText Component

[alexrobaina]

To enhance UI modularization and reusability, there's a need to create a small, reusable component that will display an address or any other text along with an icon. The text needs to be a clickable link that redirects to a provided URL in a new tab. This component will receive the following props:

Icon
URL
Text

This is an example:

• Create a new functional component with a chosen name from the proposed component names or any suitable name.
• The component should receive props for Icon, URL, and Text.
• The Text should be a clickable link that opens the provided URL in a new tab.
• The component should be styled appropriately to match the existing UI.
• Write unit tests to ensure the component behaves as expected.
• Update documentation with the new component usage. (Check the route http://localhost:3000/ui)

How to Test

• Use the new component in a view with different sets of prop values.
• Ensure the component renders correctly and the link opens in a new tab.
• Ensure the unit tests pass.

[ishaanparlikar]

Hey @alexrobaina
I can pick this up.

[alexrobaina]

Hi @ishaanparlikar. Yes, of course, I'm going to assign you.

[ishaanparlikar]

Thanks @alexrobaina
I will start working on it.

[alexrobaina]

Hi @ishaanparlikar! Would you like to continue with this issue?

[Shubhcoder]

If he is not working, then I can work on it (since I think it is needed as a part of #209).

[alexrobaina]

Yes, you are right. You need this component for Profile User.
Thanks.

[Shubhcoder]

Hi, @alexrobaina

Does the icon props needs to be a component (imported from icons in asset folder) or it is just an icon url placeholder?

Or it will have both the options? (i.e., both icon url and icon component will be accepted)

[alexrobaina]

We can create a reusable component in src/components. The component can receive an icon and text by props.

Recomend use tablericons for get svg icons