Store custom amounts in the link

web/pages/send.tsx

@@ -1,10 +1,14 @@
+import { useState } from 'react'
+import { Col } from '../components/layout/col'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
+import { Title } from '../components/title'
 import { useUser } from '../hooks/use-user'
 import { createManalink } from '../lib/firebase/manalinks'
 
 export default function SendPage() {
   const user = useUser()
+  const [amount, setAmount] = useState(100)
 
   return (
     <Page>
@@ -14,22 +18,38 @@ export default function SendPage() {
         url="/send"
       />
 
-      <h1>Send Mana</h1>
-      {user && (
-        <button
-          className="btn"
-          onClick={async () => {
-            await createManalink({
-              fromId: user.id,
-              amount: 1234,
-              expiresTime: Date.now() + 1000 * 60 * 60 * 24 * 7,
-              maxUses: Infinity,
-            })
-          }}
-        >
-          Create a new Manalink
-        </button>
-      )}
+      <Col className="gap-4">
+        <Title text="Send mana" />
+
+        {/* Add a input form to set the amount */}
+        <label>
+          Amount M$
+          <input
+            className="input"
+            type="number"
+            value={amount}
+            onChange={(e) => setAmount(parseInt(e.target.value))}
+          />
+        </label>
+
+        {user && (
+          <button
+            className="btn"
+            onClick={async () => {
+              await createManalink({
+                fromId: user.id,
+                amount: amount,
+                expiresTime: Date.now() + 1000 * 60 * 60 * 24 * 7,
+                maxUses: Infinity,
+              })
+            }}
+          >
+            Create a new Manalink
+          </button>
+        )}
+      </Col>
+
+      {/* TODO: show referral links via TailwindUI Table https://tailwindui.com/components/application-ui/lists/tables */}
     </Page>
   )
 }