feat: text input

wevm · Feb 8, 2024 · 88deef0 · 88deef0
1 parent 5648c00
commit 88deef0
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -2,7 +2,7 @@
 /** @jsxImportSource hono/jsx */
 /** @jsxFrag */
 
-import { Button, Framework } from 'farc'
+import { Button, Framework, TextInput } from 'farc'
 
 const app = new Framework()
 
@@ -43,6 +43,7 @@ app.frame('/', ({ status }) => {
       <>
         <Button>Apples</Button>
         <Button>Oranges</Button>
+        <TextInput placeholder="Enter custom fruit..." />
       </>
     ),
   }

diff --git a/src/index.tsx b/src/index.tsx
@@ -245,6 +245,15 @@ export function Button({ children, index = 0 }: ButtonProps) {
   return <meta property={`fc:frame:button:${index}`} content={children} />
 }
 
+export type TextInputProps = {
+  placeholder?: string
+}
+
+TextInput.__type = 'text-input'
+export function TextInput({ placeholder }: TextInputProps) {
+  return <meta property="fc:frame:input:text" content={placeholder} />
+}
+
 type FramePreviewProps = {
   baseUrl: string
   frame: Frame
@@ -382,8 +391,9 @@ async function parseIntents(intents_: JSX.Element) {
 function parseIntent(node: JSXNode, counter: Counter) {
   const props = (() => {
     if ((node.tag as any).__type === 'button')
-      return { children: node.children, index: counter.button++ }
-    // TODO: handle text input
+      return { ...node.props, children: node.children, index: counter.button++ }
+    if ((node.tag as any).__type === 'text-input')
+      return { ...node.props, children: node.children }
     return {}
   })()