docs: using server components in islands (#2416)

After reading the discussion at #2369, this PR introduces a small
addition to the docs which highlights how you can use server components
within islands.

This, coupled with the existing docs, should hopefully give people
enough of an example to understand that islands provide the
interactivity layer, and that server components within them can be
hydrated and made interactive too.

Closes #2369

docs/latest/concepts/islands.md

@@ -78,6 +78,34 @@ export default function Home() {
 }
 ```
 
+You can also create shared components in your `components/` directory, which can
+be used in both static content and interactive islands. When these components
+are used within islands, interactivity can be added, such as `onClick` handlers
+(using an `onClick` handler on a button outside of an island will not fire).
+
+```tsx islands/my-island.tsx
+import { useSignal } from "@preact/signals";
+import { ComponentChildren } from "preact";
+import Card from "../components/Card.tsx";
+import Button from "../components/Button.tsx";
+
+interface Props {
+  children: ComponentChildren;
+}
+
+export default function MyIsland({ children }: Props) {
+  const count = useSignal(0);
+
+  return (
+    <Card>
+      Counter is at {count}.{" "}
+      <Button onClick={() => (count.value += 1)}>+</Button>
+      {children}
+    </Card>
+  );
+}
+```
+
 ## Passing other props to islands
 
 Passing props to islands is supported, but only if the props are serializable.