KPI Metric Card Component

Hello folks, 👋
I am Himanshu Singh. I am an engineer and I like to build things.
Recently, I worked on a KPI Metric Card Component.

Live — https://metric-tiles.vercel.app/

Where each KPI card has two modes, View Mode and Edit Mode.
The view mode shows the data for the selected metric & segment, and the edit mode displays the metric and segment selectors.

When you are in view mode, clicking anywhere switches to edit mode. And, when you are in edit mode, you can go back to view mode by clicking the cancel/save button.

The component also has the functionality to add new cards, which you can do either on the left position or the right position by clicking the plus icon, that you get on both sides of the card on hover.

The new card starts in the edit mode.

The component is responsive, which means it will not break on different devices, and max you will see 3 cards in a row. And, the container itself is horizontally aligned in the center of the page.

Which tech stack did you use?

I used React, TypeScript, TailwindCSS, and Highcharts to make this component.

Thanks for stopping by and reading it.
You can connect with me on X (previously. Twitter) by clicking here.

You can get the component code here.