Conditionally render name of loaded template sample in Loaded Output

[Vinyl-Davyl]

Context

This issue concerns the conditional rendering of the loaded template sample name within the "Loaded Output" section of the Accord Project Playground.

Expected Behavior

Upon clicking a template sample within the playground, the name of the loaded template sample should be clearly displayed within the "Loaded Output" area. This provides users with immediate confirmation of the loaded sample and enhances clarity.

Actual Behavior

Currently, clicking a template sample does not trigger the display of the sample name within the "Loaded Output" section. This leaves the user unsure of which sample is loaded and can be confusing, especially when dealing with multiple samples.

Possible Fix

The potential fix involves modifying the code responsible for rendering the "Loaded Output" section. This could involve:

• Updating the logic to conditionally render the template sample name based on user interaction (e.g., clicking a sample).
• Passing the sample name as a parameter to the "Loaded Output" component and conditionally displaying it based on the presence of the name.

Steps to Reproduce

1. Open the Accord Project Playground.
2. Navigate to the template library section.
3. Click on any template sample.
4. Observe that the name of the clicked sample is not displayed within the "Loaded Output" area.

Existing issues

Your Environment

• Version used: (Specify the Accord Project Playground version, if applicable)
• Environment name and version: (e.g., Chrome 110, Node.js 18.12.1)
• Operating System and version: (e.g., Windows 11, macOS Ventura)
• Link to your project: (If applicable, provide a link to your local or development environment)

Additional Notes:

[Vinyl-Davyl]

Solved in PR https://github.com/accordproject/template-playground/pull/33 ✅

[Vinyl-Davyl]

Hey 👋 @muskanbararia I fixed this issue in PR #33 already.