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:
- Default Variant – This is how it looks initially, showing the placeholder details.
- Hover Variant – This appears when I hover over the section, giving visual feedback that it’s clickable.
- 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.