Implement filter card feature

[keizer619]

Description

Currently there are tabs displayed in following pages. Those tags should be clickable to filter and remove filter

https://ballerina.io/learn/integration-tutorials/
https://ballerina.io/learn/pre-built-integrations/
https://ballerina.io/learn/enterprise-integration-patterns/

[LG-blip]

I would like to work on this project

[sm1990]

Hi @LG-blip

First of all, thank you for choosing to contribute to Ballerina website.

This issue is related to the rendering of code snippets through out our website and you can work on this issue.

Please note that this issue is eligible for both Ballerina Hacktoberfest and Digital Ocean Hacktoberfest.

Let me know if you need anything else.

Happy coding!!!!! 😄

[LG-blip]

Those tags should be clickable to "filter and remove filter" ? i couldn't understand this part could you explain?

[sm1990]

Those tags should be clickable to "filter and remove filter" ? i couldn't understand this part could you explain?

Yes. Currently they're just some text inside a span. Make the whole span/badge clickable.
Once you click, It should filter the items and show the current filter above the cards as below.

The new badge should have a close button (denoted by the X in the image) to remove the filter.

Let me know if there are anymore questions.

[Pinaka-Pani-18]

Hi @sm1990 ,

I've worked on this issue, and now it works as follows.
https://github.com/ballerina-platform/ballerina-dev-website/assets/102857774/0263de75-32fb-4fc3-a9aa-b6acc1b3587d

If you're okay with it, I'll proceed with the remaining part and create a PR.

If you have any suggestions for improvements, please let me know.

[sm1990]

@LG-blip any update on this issue? If you are not working on this can you assign it to @Pinaka-Pani-18 as his solution seems to be correct.

[LG-blip]

Okay

[sm1990]

@Pinaka-Pani-18 can you send the PR