I have a section with placeholder information like “Incognito Bird” (random name), city, phone number, and email. I’ve created a component for this section with three different states or variants:

1. Default Variant – This is how it looks initially, showing the placeholder details.


2. Hover Variant – This appears when I hover over the section, giving visual feedback that it’s clickable.


3. Edited Variant – Once I input my information and save it, this variant shows the updated details.

Here’s how I want it to work:

• When I hover over the section, it should switch to the hover variant.


• When I click on the section, an overlay should open where I can input my details.


• After I input the information and click “save,” the section should switch to the edited variant, showing the updated information.