annotate zones example (#2461)

Annotate zones example. I changed this one a little bit, I thought it
made more sense for both the sharezone and topzone to look similar to
each other, rather than importing the offline indicator.

### Change Type

- [ ] `patch` — Bug fix
- [ ] `minor` — New feature
- [ ] `major` — Breaking change
- [ ] `dependencies` — Changes to package dependencies[^1]
- [x] `documentation` — Changes to the documentation only[^2]
- [ ] `tests` — Changes to any test code only[^2]
- [ ] `internal` — Any other changes that don't affect the published
package[^2]
- [ ] I don't know

[^1]: publishes a `patch` release, for devDependencies use `internal`
[^2]: will not publish a new version

### Test Plan

1. Add a step-by-step description of how to test your PR here.
2.

- [ ] Unit Tests
- [ ] End to end tests

### Release Notes

- annotate zones example

apps/examples/src/examples/zones/ZonesExample.tsx

@@ -1,14 +1,35 @@
-import { OfflineIndicator, Tldraw } from '@tldraw/tldraw'
+import { Tldraw } from '@tldraw/tldraw'
 import '@tldraw/tldraw/tldraw.css'
 
+// There's a guide at the bottom of this file!
+
+// [1]
 export default function Example() {
 	return (
 		<div className="tldraw__editor">
-			<Tldraw topZone={<OfflineIndicator />} shareZone={<CustomShareZone />} />
+			<Tldraw topZone={<CustomTopZone />} shareZone={<CustomShareZone />} />
 		</div>
 	)
 }
 
+// [2]
+function CustomTopZone() {
+	return (
+		<div
+			style={{
+				backgroundColor: 'thistle',
+				width: '100%',
+				textAlign: 'center',
+				padding: '2px',
+				minWidth: '80px',
+			}}
+		>
+			<p>Top Zone</p>
+		</div>
+	)
+}
+
+// [3]
 function CustomShareZone() {
 	return (
 		<div
@@ -23,3 +44,18 @@ function CustomShareZone() {
 		</div>
 	)
 }
+
+/* 
+This example shows how to pass in a custom component to the share zone and top zone.
+The share zone is in the top right corner above the style menu, the top zone is in 
+the top center.
+
+[1]
+We pass in our custom components to the Tldraw topZone and shareZone props.
+
+[2]
+This is the component that will be rendered in the top zone.
+
+[3]
+This is the component that will be rendered in the share zone.
+*/