chore: initial public commit

client/app/components/AsyncButton.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react"
+
+type Props = {
+    children: React.ReactNode
+    onClick: () => void
+    loading?: boolean
+    disabled?: boolean
+    confirm?: boolean
+}
+
+export function AsyncButton(props: Props) {
+    const [awaitingConfirm, setAwaitingConfirm] = useState(false)
+
+    const handleClick = () => {
+        if (props.confirm) {
+            if (!awaitingConfirm) {
+                setAwaitingConfirm(true)
+                setTimeout(() => setAwaitingConfirm(false), 3000)
+                return
+            }
+            setAwaitingConfirm(false)
+        }
+
+        props.onClick()
+    }
+
+    return (
+        <button
+            onClick={handleClick}
+            disabled={props.loading || props.disabled}
+            className={`relative px-5 py-2 rounded-md large-button flex disabled:opacity-50 items-center`}
+        >
+            <span className={props.loading ? 'invisible' : 'visible'}>
+                {awaitingConfirm ? 'Are you sure?' : props.children}
+            </span>
+            {props.loading && (
+                <span className="absolute inset-0 flex items-center justify-center">
+                    <span className="animate-spin h-4 w-4 border-2 border-white border-t-transparent rounded-full"></span>
+                </span>
+            )}
+        </button>
+    )
+}