Update `with-nanostores` example to match docs walkthrough (#3840)

* feat: replace with-nanostores with new example

* docs: update README with docs call-out

* chore: small formatting inconsistencies

* nit: standardize to spaces :'(

* nit: standardize to tabs!

* refactor: use html "hidden" property

* nit: beta.66 for sanity

1 files changed, 22 insertions, 0 deletions

diff --git a/examples/with-nanostores/src/components/AddToCartForm.tsx b/examples/with-nanostores/src/components/AddToCartForm.tsx
new file mode 100644
index 000000000..2f1befb9f
--- /dev/null
+++ b/examples/with-nanostores/src/components/AddToCartForm.tsx
@@ -0,0 +1,22 @@
+import { isCartOpen, addCartItem } from '../cartStore';
+import type { CartItemDisplayInfo } from '../cartStore';
+import type { ComponentChildren } from 'preact';
+
+type Props = {
+	item: CartItemDisplayInfo;
+	children: ComponentChildren;
+}
+
+export default function AddToCartForm({ item, children }: Props) {
+	function addToCart(e: SubmitEvent) {
+		e.preventDefault();
+		isCartOpen.set(true);
+		addCartItem(item);
+	}
+
+	return (
+		<form onSubmit={addToCart}>
+			{children}
+		</form>
+	)
+}