From bc75101dcfef1e7c1599540652fcbb1ef35c20f6 Mon Sep 17 00:00:00 2001
From: Kerim Hudson <31065041+baosoy@users.noreply.github.com>
Date: Tue, 30 Apr 2024 13:07:23 +0100
Subject: [PATCH] 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 | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/docs/latest/concepts/islands.md b/docs/latest/concepts/islands.md
index 514f4841665..fc332f96a87 100644
--- a/docs/latest/concepts/islands.md
+++ b/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.