Merge pull request #250 from framesjs/feat/updated-multi-page-example

feat: updated multi-page example

.changeset/ten-beans-compete.md

@@ -0,0 +1,5 @@
+---
+"framesjs-starter": patch
+---
+
+feat: updated multi-page example

examples/framesjs-starter/app/examples/new-api-multi-page/frames/frames.ts

@@ -0,0 +1,5 @@
+import { createFrames } from "frames.js/next";
+
+export const frames = createFrames({
+  basePath: "/examples/new-api-multi-page/frames",
+});

examples/framesjs-starter/app/examples/new-api-multi-page/frames/route.tsx

@@ -1,47 +1,25 @@
 /* eslint-disable react/jsx-key */
-import { createFrames, Button } from "frames.js/next";
-
-const totalPages = 5;
-
-const frames = createFrames({
-  basePath: "/examples/new-api-multi-page/frames",
-});
-
-const handleRequest = frames(async (ctx) => {
-  const pageIndex = Number(ctx.searchParams.pageIndex || 0);
-
-  const imageUrl = `https://picsum.photos/seed/frames.js-${pageIndex}/300/200`;
+import { frames } from "./frames";
+import { Button } from "frames.js/next";
 
+const handler = frames(async () => {
   return {
-    image: (
-      <div tw="flex flex-col">
-        <img width={300} height={200} src={imageUrl} alt="Image" />
-        <div tw="flex">
-          This is slide {pageIndex + 1} / {totalPages}
-        </div>
-      </div>
-    ),
+    image: <div tw="flex">Welcome</div>,
     buttons: [
+      // With query params
       <Button
         action="post"
-        target={{
-          query: { pageIndex: (pageIndex - 1) % totalPages },
-        }}
+        target={{ pathname: "/route1", query: { foo: "bar" } }}
       >
-        ←
+        Go to route 1
       </Button>,
-      <Button
-        action="post"
-        target={{
-          query: { pageIndex: (pageIndex + 1) % totalPages },
-        }}
-      >
-        →
+      // Without query params
+      <Button action="post" target="/route2">
+        Go to route 2
       </Button>,
     ],
-    textInput: "Type something!",
   };
 });
 
-export const GET = handleRequest;
-export const POST = handleRequest;
+export const GET = handler;
+export const POST = handler;

examples/framesjs-starter/app/examples/new-api-multi-page/frames/route1/route.tsx

@@ -0,0 +1,19 @@
+/* eslint-disable react/jsx-key */
+import { frames } from "../frames";
+import { Button } from "frames.js/next";
+
+export const POST = frames(async (ctx) => {
+  const foo = ctx.searchParams.foo;
+
+  return {
+    image: <div tw="flex">Route 1 foo: {foo}</div>, // foo: bar
+    buttons: [
+      <Button action="post" target="/">
+        Go back
+      </Button>,
+      <Button action="post" target="/route2">
+        Go to route 2
+      </Button>,
+    ],
+  };
+});

examples/framesjs-starter/app/examples/new-api-multi-page/frames/route2/route.tsx

@@ -0,0 +1,20 @@
+/* eslint-disable react/jsx-key */
+import { frames } from "../frames";
+import { Button } from "frames.js/next";
+
+export const POST = frames(async () => {
+  return {
+    image: <div tw="flex">Route 2</div>,
+    buttons: [
+      <Button action="post" target="/">
+        Go to initial route
+      </Button>,
+      <Button
+        action="post"
+        target={{ pathname: "/route1", query: { foo: "baz" } }}
+      >
+        Go to route 1
+      </Button>,
+    ],
+  };
+});