feat: zap (#107)

src/pages/secondary/WalletPage/DefaultZapCommentInput.tsx

@@ -0,0 +1,27 @@
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { useZap } from '@/providers/ZapProvider'
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export default function DefaultZapCommentInput() {
+  const { t } = useTranslation()
+  const { defaultZapComment, updateDefaultComment } = useZap()
+  const [defaultZapCommentInput, setDefaultZapCommentInput] = useState(defaultZapComment)
+
+  return (
+    <div className="w-full space-y-1">
+      <Label htmlFor="default-zap-comment-input">{t('Default zap comment')}</Label>
+      <div className="flex w-full items-center gap-2">
+        <Input
+          id="default-zap-comment-input"
+          value={defaultZapCommentInput}
+          onChange={(e) => setDefaultZapCommentInput(e.target.value)}
+          onBlur={() => {
+            updateDefaultComment(defaultZapCommentInput)
+          }}
+        />
+      </div>
+    </div>
+  )
+}