Docs/actions page (#780)

src/routes/solid-router/concepts/actions.mdx

@@ -30,7 +30,7 @@ To create an action, use the `action` function from the `@solidjs/router` packag
 This function takes an asynchronous function as an argument and returns a new function that can be used to submit data.
 
 ```tsx
-import { action, useAction } from "@solidjs/router";
+import { action } from "@solidjs/router";
 
 const echo = action(async (message: string) => {
   // Simulates an asynchronous operation, such as an API call
@@ -48,8 +48,14 @@ Typically, route actions are used with some sort of solution like fetch or Graph
 To use the action, you can call it from within a component using `useAction`.
 This returns a function that can be called with the necessary arguments to trigger the action.
 
-```tsx
-import { useAction } from "@solidjs/router";
+```tsx del={1} ins={2,9-13}
+import { action } from "@solidjs/router";
+import { action, useAction } from "@solidjs/router";
+
+const echo = action(async (message: string) => {
+  await new Promise((resolve, reject) => setTimeout(resolve, 1000));
+  console.log(message);
+});
 
 export function MyComponent() {
   const myEcho = useAction(echo);
@@ -69,7 +75,8 @@ Anything returned from an action can be accessed using the reactive `action.resu
 
 To access the action's result, you must pass the action to `useSubmission`:
 
-```tsx {8,14}
+```tsx del={1} ins={2,11,15-17}
+import { action, useAction } from "@solidjs/router";
 import { action, useAction, useSubmission } from "@solidjs/router";
 
 const echo = action(async (message: string) => {

src/routes/solid-router/reference/data-apis/action.mdx

@@ -30,7 +30,7 @@ The `with` method works similar to [`bind`](https://developer.mozilla.org/en-US/
 
 Without `with`:
 
-```js
+```jsx
 const deleteTodo = action(async (formData: FormData) => {
   const id = Number(formData.get("id"))
   await api.deleteTodo(id)
@@ -44,9 +44,14 @@ const deleteTodo = action(async (formData: FormData) => {
 
 Using `with`:
 
-```js
-const deleteUser = action(api.deleteTodo)
+```jsx del={6,7} ins={8}
+const deleteTodo = action(async (formData: FormData) => {
+  const id = Number(formData.get("id"))
+  await api.deleteTodo(id)
+})
 
+<form action={deleteTodo} method="post">
+  <input type="hidden" name="id" value={todo.id} />
 <form action={deleteTodo.with(todo.id)} method="post">
   <button type="submit">Delete</button>
 </form>