[FEAT] Dynamic Component Example Viewer

[xelaint]

💡 Feature request

Feature Name

Dynamic Component Example Viewer

The Desired Behavior

Update example viewer to be more comprehensive and dynamic so that it has:

• Dropdown theme option for light, dark, or system
• Dropdown / checkboxes to change properties within a component
• A view of a rendered component, where it will change depending on what property(s) have been selected / checked
• Code tab or code section below the component example

Your Use Case

As a designer and developer, I would like to display a live demo of a component with all its properties/options without having to make a component example for each property.

Prior Work

Environment

Daffodil version: X.Y.Z
Angular version: X.Y.Z 

 
For Tooling issues:
- Node version: XX  
- Platform:  

Others:

[xelaint]

https://www.figma.com/design/4A0SIso9uJ7HGKdW9GKMGr/Daffodil-Design-System?node-id=2167-557