Adding Icons to Filter Tags in Project Cards

[Ayusht777]

This issue aims to enhance the visual appeal and user experience of the project section by adding icons at the beginning of each filter tag. Currently, the filter tags are displayed as plain text, which can be improved by incorporating relevant icons that represent the category or type of projects

[harshkhandeparkar]

How would you map a tag to an icon?

[Ayusht777]

Option 1: Mapping Tags to Icons

You can convert your projectTags.json into a JavaScript file and map each tag to corresponding icons. Utilizing a library like react-icons would allow you to easily incorporate these icons into your React project.

// Example mapping using react-icons
import { SiCss3, SiReact, SiJavascript } from 'react-icons/si';

const tagIcons = {
  Css: <SiCss3 />,
  React: <SiReact />,
  Javascript: <SiJavascript />,
  // Add more tags and icons as needed
};

Option 2: Using Color Dot According to Tags

const tagColors = {
  Css: '#3498db',
  React: '#61dafb',
  Javascript: '#f39c12',
  // Add more tags and colors as needed
};

const tag = "Css";
const color = tagColors[tag]; 

[harshkhandeparkar]

Option 1: Mapping Tags to Icons

You can convert your projectTags.json into a JavaScript file and map each tag to corresponding icons. Utilizing a library like react-icons would allow you to easily incorporate these icons into your React project.

// Example mapping using react-icons
import { SiCss3, SiReact, SiJavascript } from 'react-icons/si';

const tagIcons = {
  Css: <SiCss3 />,
  React: <SiReact />,
  Javascript: <SiJavascript />,
  // Add more tags and icons as needed
};

Option 2: Using Color Dot According to Tags

const tagColors = {
  Css: '#3498db',
  React: '#61dafb',
  Javascript: '#f39c12',
  // Add more tags and colors as needed
};

const tag = "Css";
const color = tagColors[tag]; 

Ig we can try this. What do you suggest will be the default icon?

[Ayusht777]

Can you share a list of tags that you use so that I can find the appropriate icon pack for them?

[harshkhandeparkar]

Can you share a list of tags that you use so that I can find the appropriate icon pack for them?

The tags are custom. They are entered by the mentor during registration, there is no set list of tags.

[Ayusht777]

If we have predefined tags, it's straightforward to associate icons with them. However, for random tags, we can consider assigning generic elements like colors or other visual indicators.

[harshkhandeparkar]

If we have predefined tags, it's straightforward to associate icons with them. However, for random tags, we can consider assigning generic elements like colors or other visual indicators.

We could do that. Or we could have a default tag icon for the tags we don't have an icon for.

[Ayusht777]

I plan to assign distinct colors to popular languages and frameworks like HTML, CSS, React, etc. For other / Generic elements, I'll designate shades of gray.

[harshkhandeparkar]

I plan to assign distinct colors to popular languages and frameworks like HTML, CSS, React, etc. For other / Generic elements, I'll designate shades of gray.

Can you make a mockup design?

[Ayusht777]

OK I will provide a preview

[Tonystark121]

Hii @Ayusht777, I would like to contribute to this issue; can you assign me, pls?

[Ayusht777]

@Tonystark121 I can not you this issue i am not maintainer of this project

[harshkhandeparkar]

@Ayusht777 do you want to continue working on this?

[Ayusht777]

@harshkhandeparkar After analyzing website tags, I'll provide a list with color codes for common tags. For unknown tags, I'll use a gray shade. If this list works for you, I'll proceed with further working on this project.

[harshkhandeparkar]

Thanks! @Tonystark121 since Ayush has already begun work, I have assigned this issue to them. There are many more open issues though!

[Ayusht777]

Hey in projectcard component the tags are passed as props and the data for it your are getting from back-end so why projectTags.json file is created i do not know about back-end stuffs so is this is backend part than sorry and so you can assigned it to another person