Improve usability/readability of MultiCodeExample

[industrian]

There are two issues I've noted in MultiCodeExample which are explained in further detail below:

• Code languages are listed in dropdowns
• Usability issues when using code from the same language

Before explaining, I want to show a screenshot of a MultiCodeExample from Astro Docs which is an example of how I would address these two issues:

---

Issue 1: Code languages are listed in dropdowns

• Readers are unaware of what code examples are available without opening the list.
• To change between code examples it requires two clicks (one on the list itself, one on the language to change to).

Using a horizontal list as in the above screenshot immediately tells the reader what code is available, and also makes it easier to switch between code examples.

---

Issue 2: Usability issues when using code from the same language

• We may want to present two code examples that use the same language.
• For example: in the Connect docs we have code for installing either the JavaScript or TypeScript template. If in a MultiCodeExample, the language ("Terminal") is not descriptive to the purpose/action of the code examples:
  

I would recommend changing the selector from language to title. For example, the top screenshot uses npm, pnpm, and Yarn. We could adapt the Connect MultiCodeExample to "Install JavaScript" and "Install TypeScript".

[FFawzy]

@industrian I'd recommend adding this to @zbalek 's board first.

I know in the past we used to take decisions directly on this, but since Zoe is here now. she can decide and if needed she will pass it to us for implementation

[industrian]

This issue has been resolved by the implementation of MultiPathBlock.