Add Component Example (#2203)

* Add Component Example

* chore(lint): Prettier fix

* nit: improve implementation

* nit: Update documentation

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

1 files changed, 37 insertions, 0 deletions

diff --git a/examples/component/packages/my-component/README.md b/examples/component/packages/my-component/README.md
new file mode 100644
index 000000000..41a53a6f0
--- /dev/null
+++ b/examples/component/packages/my-component/README.md
@@ -0,0 +1,37 @@
+# Example `@example/my-component`
+
+This is an example package, exported as `@example/my-component`. It consists of two Astro components, **Button** and **Heading**.
+
+### Button
+
+The **Button** component generates a `<button>` with a default **type** of **button**.
+
+```astro
+---
+import * as Component from '@example/my-component'
+---
+<Component.Button>Plain Button</Component.Button>
+```
+
+```html
+<!-- generated html -->
+<button type="button">Plain Button</button>
+```
+
+### Heading
+
+The **Heading** component generates an `<h>` tag with a default **role** of **heading** and a **level** attribute that gets written to **aria-level**.
+
+```astro
+---
+import * as Component from '@example/my-component'
+---
+<Component.Heading>Heading</Component.Heading>
+<Component.Heading level="2">Subheading</Component.Heading>
+```
+
+```html
+<!-- generated html -->
+<h role="heading" aria-level="1">Plain Button</h>
+<h role="heading" aria-level="2">Subheading</h>
+```