chore: Add free tools on marketing pages

2025-12-29 19:22:35 +01:00
parent 5993b842a0
commit 6293259225
15 changed files with 1822 additions and 22 deletions
@@ -0,0 +1,150 @@
+import {AlertCircle, AlertTriangle, CheckCircle, Info, Mail, Server, Shield, Trash2, XCircle} from 'lucide-react';
+import type {EmailVerificationResult as VerificationResult} from '../../lib/emailVerification';
+
+interface EmailVerificationResultProps {
+  result: VerificationResult;
+}
+
+export function EmailVerificationResult({result}: EmailVerificationResultProps) {
+  return (
+    <div className="space-y-6">
+      {/* Overall Status */}
+      <div
+        className={`rounded-lg border-2 p-6 ${
+          result.valid ? 'border-green-200 bg-green-50' : 'border-red-200 bg-red-50'
+        }`}
+      >
+        <div className="flex items-center gap-3">
+          {result.valid ? (
+            <CheckCircle className="h-8 w-8 text-green-600" />
+          ) : (
+            <XCircle className="h-8 w-8 text-red-600" />
+          )}
+          <div>
+            <h3 className={`text-xl font-semibold ${result.valid ? 'text-green-900' : 'text-red-900'}`}>
+              {result.valid ? 'Valid Email' : 'Invalid Email'}
+            </h3>
+            <p className={`text-sm ${result.valid ? 'text-green-700' : 'text-red-700'}`}>{result.email}</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Detailed Checks */}
+      <div className="rounded-lg border border-neutral-200 bg-white">
+        <div className="border-b border-neutral-200 bg-neutral-50 px-6 py-4">
+          <h4 className="font-semibold text-neutral-900">Verification Details</h4>
+        </div>
+        <div className="divide-y divide-neutral-200">
+          {/* Domain Exists */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Server className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Domain Exists</p>
+                <p className="text-sm text-neutral-600">DNS A/AAAA records found</p>
+              </div>
+            </div>
+            {result.domainExists ? (
+              <CheckCircle className="h-5 w-5 text-green-600" />
+            ) : (
+              <XCircle className="h-5 w-5 text-red-600" />
+            )}
+          </div>
+
+          {/* MX Records */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Mail className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">MX Records</p>
+                <p className="text-sm text-neutral-600">Mail server configured</p>
+              </div>
+            </div>
+            {result.hasMxRecords ? (
+              <CheckCircle className="h-5 w-5 text-green-600" />
+            ) : (
+              <XCircle className="h-5 w-5 text-red-600" />
+            )}
+          </div>
+
+          {/* Disposable Email */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Trash2 className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Disposable Email</p>
+                <p className="text-sm text-neutral-600">Temporary email service</p>
+              </div>
+            </div>
+            {result.isDisposable ? (
+              <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            ) : (
+              <CheckCircle className="h-5 w-5 text-green-600" />
+            )}
+          </div>
+
+          {/* Typo Detection */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <AlertCircle className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Typo Check</p>
+                <p className="text-sm text-neutral-600">Common spelling errors</p>
+              </div>
+            </div>
+            {result.isTypo ? (
+              <AlertTriangle className="h-5 w-5 text-yellow-600" />
+            ) : (
+              <CheckCircle className="h-5 w-5 text-green-600" />
+            )}
+          </div>
+
+          {/* Plus Addressing */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <div className="flex items-center gap-3">
+              <Shield className="h-5 w-5 text-neutral-600" />
+              <div>
+                <p className="font-medium text-neutral-900">Plus Addressing</p>
+                <p className="text-sm text-neutral-600">Uses + tag (user+tag@domain.com)</p>
+              </div>
+            </div>
+            {result.isPlusAddressed ? (
+              <Info className="h-5 w-5 text-blue-600" />
+            ) : (
+              <span className="text-sm text-neutral-500">No</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Suggested Email (if typo detected) */}
+      {result.suggestedEmail && (
+        <div className="rounded-lg border border-yellow-200 bg-yellow-50 p-4">
+          <div className="flex items-start gap-3">
+            <AlertTriangle className="h-5 w-5 text-yellow-600 mt-0.5" />
+            <div>
+              <p className="font-medium text-yellow-900">Did you mean?</p>
+              <p className="text-sm text-yellow-700 mt-1">
+                <span className="font-mono bg-yellow-100 px-2 py-0.5 rounded">{result.suggestedEmail}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Reasons */}
+      {result.reasons && result.reasons.length > 0 && (
+        <div className="rounded-lg border border-neutral-200 bg-white p-6">
+          <h4 className="font-semibold text-neutral-900 mb-3">Analysis</h4>
+          <ul className="space-y-2">
+            {result.reasons.map((reason, index) => (
+              <li key={index} className="flex items-start gap-2 text-sm text-neutral-700 list-disc list-inside">
+                <span>{reason}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
@@ -0,0 +1,77 @@
+import {EditorContent, useEditor} from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import {TextAlign} from '@tiptap/extension-text-align';
+import {Color} from '@tiptap/extension-color';
+import {TextStyle} from '@tiptap/extension-text-style';
+import {Link} from '@tiptap/extension-link';
+import {Underline} from '@tiptap/extension-underline';
+import {Image} from '@tiptap/extension-image';
+import Placeholder from '@tiptap/extension-placeholder';
+import {MarkdownEmailToolbar} from './MarkdownEmailToolbar';
+import {useEffect} from 'react';
+
+interface MarkdownEmailEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+export function MarkdownEmailEditor({value, onChange}: MarkdownEmailEditorProps) {
+  const editor = useEditor({
+    immediatelyRender: false,
+    extensions: [
+      StarterKit.configure({
+        heading: {
+          levels: [1, 2, 3],
+        },
+      }),
+      TextAlign.configure({
+        types: ['heading', 'paragraph'],
+        alignments: ['left', 'center', 'right', 'justify'],
+      }),
+      Color,
+      TextStyle,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          rel: 'noopener noreferrer',
+        },
+      }),
+      Image.configure({
+        HTMLAttributes: {
+          class: 'email-image',
+        },
+        inline: false,
+      }),
+      Placeholder.configure({
+        placeholder: 'Start typing your email here...',
+      }),
+    ],
+    content: value || '',
+    editorProps: {
+      attributes: {
+        class: 'prose prose-sm max-w-none focus:outline-none min-h-[500px] px-4 py-3 text-neutral-900',
+      },
+    },
+    onUpdate: ({editor}) => {
+      const html = editor.getHTML();
+      onChange(html);
+    },
+  });
+
+  // Update editor content when value prop changes from outside
+  useEffect(() => {
+    if (editor && value !== editor.getHTML()) {
+      editor.commands.setContent(value || '');
+    }
+  }, [value, editor]);
+
+  return (
+    <div className="border border-neutral-200 rounded-lg bg-white">
+      <MarkdownEmailToolbar editor={editor} />
+      <div className="overflow-hidden">
+        <EditorContent editor={editor} className="bg-white" />
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,492 @@
+import {type Editor} from '@tiptap/react';
+import {
+  AlignCenter,
+  AlignJustify,
+  AlignLeft,
+  AlignRight,
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Image as ImageIcon,
+  Italic,
+  Link,
+  List,
+  ListOrdered,
+  Palette,
+  Quote,
+  Redo,
+  Strikethrough,
+  Underline as UnderlineIcon,
+  Undo,
+} from 'lucide-react';
+import {Button, Input} from '@plunk/ui';
+import {useCallback, useState} from 'react';
+import {EDITOR_COLOR_GROUPS} from '../../lib/editorColors';
+
+interface ToolbarProps {
+  editor: Editor | null;
+}
+
+export function MarkdownEmailToolbar({editor}: ToolbarProps) {
+  const [showLinkInput, setShowLinkInput] = useState(false);
+  const [linkUrl, setLinkUrl] = useState('');
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [customColor, setCustomColor] = useState('');
+  const [showImageInput, setShowImageInput] = useState(false);
+  const [imageUrl, setImageUrl] = useState('');
+
+  // Factory function to create editor command handlers
+  const createCommandHandler = useCallback(
+    (command: (editor: Editor) => void) => () => {
+      if (!editor) return;
+      command(editor);
+    },
+    [editor],
+  );
+
+  // Complex handlers that need state management
+  const addLink = useCallback(() => {
+    if (!editor || !linkUrl) return;
+    if (editor.isActive('link')) {
+      editor.chain().focus().extendMarkRange('link').setLink({href: linkUrl}).run();
+    } else {
+      editor.chain().focus().setLink({href: linkUrl}).run();
+    }
+    setLinkUrl('');
+    setShowLinkInput(false);
+  }, [editor, linkUrl]);
+
+  const removeLink = useCallback(() => {
+    if (!editor) return;
+    editor.chain().focus().unsetLink().run();
+    setLinkUrl('');
+    setShowLinkInput(false);
+  }, [editor]);
+
+  const setColor = useCallback(
+    (color: string) => {
+      if (!editor) return;
+      editor.chain().focus().setColor(color).run();
+      setSelectedColor(color);
+    },
+    [editor],
+  );
+
+  const applyCustomColor = useCallback(() => {
+    if (customColor && /^#[0-9A-F]{6}$/i.test(customColor)) {
+      setColor(customColor);
+      setCustomColor('');
+      setShowColorPicker(false);
+    }
+  }, [customColor, setColor]);
+
+  const toggleLinkInput = useCallback(() => {
+    if (!editor) return;
+    if (editor.isActive('link')) {
+      const previousUrl = editor.getAttributes('link').href || '';
+      setLinkUrl(previousUrl);
+      setShowLinkInput(true);
+    } else {
+      setShowLinkInput(!showLinkInput);
+      setLinkUrl('');
+    }
+  }, [editor, showLinkInput]);
+
+  const addImage = useCallback(() => {
+    if (!editor || !imageUrl) return;
+    editor.chain().focus().setImage({src: imageUrl}).run();
+    setImageUrl('');
+    setShowImageInput(false);
+  }, [editor, imageUrl]);
+
+  if (!editor) {
+    return null;
+  }
+
+  return (
+    <div className="border-b border-neutral-200 bg-neutral-50 p-2 flex flex-wrap gap-1 sticky top-0 z-40">
+      {/* History */}
+      <div className="flex gap-0.5 pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().undo().run())}
+          disabled={!editor.can().undo()}
+          className="h-8 w-8"
+        >
+          <Undo className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().redo().run())}
+          disabled={!editor.can().redo()}
+          className="h-8 w-8"
+        >
+          <Redo className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Text formatting */}
+      <div className="flex gap-0.5 pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleBold().run())}
+          data-active={editor.isActive('bold')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Bold className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleItalic().run())}
+          data-active={editor.isActive('italic')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Italic className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleUnderline().run())}
+          data-active={editor.isActive('underline')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <UnderlineIcon className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleStrike().run())}
+          data-active={editor.isActive('strike')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Strikethrough className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleCode().run())}
+          data-active={editor.isActive('code')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Code className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Headings */}
+      <div className="flex gap-0.5 pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleHeading({level: 1}).run())}
+          data-active={editor.isActive('heading', {level: 1})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Heading1 className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleHeading({level: 2}).run())}
+          data-active={editor.isActive('heading', {level: 2})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Heading2 className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleHeading({level: 3}).run())}
+          data-active={editor.isActive('heading', {level: 3})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Heading3 className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Lists */}
+      <div className="flex gap-0.5 pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleBulletList().run())}
+          data-active={editor.isActive('bulletList')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <List className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleOrderedList().run())}
+          data-active={editor.isActive('orderedList')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <ListOrdered className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().toggleBlockquote().run())}
+          data-active={editor.isActive('blockquote')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Quote className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Alignment */}
+      <div className="flex gap-0.5 pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().setTextAlign('left').run())}
+          data-active={editor.isActive({textAlign: 'left'})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <AlignLeft className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().setTextAlign('center').run())}
+          data-active={editor.isActive({textAlign: 'center'})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <AlignCenter className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().setTextAlign('right').run())}
+          data-active={editor.isActive({textAlign: 'right'})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <AlignRight className="h-4 w-4" />
+        </Button>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={createCommandHandler(ed => ed.chain().focus().setTextAlign('justify').run())}
+          data-active={editor.isActive({textAlign: 'justify'})}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <AlignJustify className="h-4 w-4" />
+        </Button>
+      </div>
+
+      {/* Color picker */}
+      <div className="relative pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={() => setShowColorPicker(!showColorPicker)}
+          className="h-8 w-8"
+        >
+          <Palette className="h-4 w-4" />
+        </Button>
+        {showColorPicker && (
+          <div
+            className="absolute top-10 left-0 bg-white border border-neutral-200 rounded-lg shadow-lg p-3 z-50 max-h-96 overflow-y-auto"
+            style={{width: '280px'}}
+          >
+            {/* Custom color input */}
+            <div className="mb-3 pb-3 border-b border-neutral-200">
+              <label className="text-xs font-medium text-neutral-600 mb-1 block">Custom Color</label>
+              <div className="flex gap-2">
+                <Input
+                  type="text"
+                  value={customColor}
+                  onChange={e => setCustomColor(e.target.value.toUpperCase())}
+                  placeholder="#000000"
+                  className="h-8 text-xs font-mono"
+                  maxLength={7}
+                  onKeyDown={e => {
+                    if (e.key === 'Enter') {
+                      applyCustomColor();
+                    }
+                  }}
+                />
+                <Button
+                  type="button"
+                  size="sm"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={applyCustomColor}
+                  disabled={!customColor || !/^#[0-9A-F]{6}$/i.test(customColor)}
+                  className="h-8"
+                >
+                  Apply
+                </Button>
+              </div>
+            </div>
+
+            {/* Color palette */}
+            <div className="space-y-3">
+              {EDITOR_COLOR_GROUPS.map(group => (
+                <div key={group.name}>
+                  <label className="text-xs font-medium text-neutral-600 mb-1.5 block">{group.name}</label>
+                  <div className="grid grid-cols-7 gap-1.5">
+                    {group.colors.map(color => (
+                      <button
+                        key={color}
+                        type="button"
+                        onMouseDown={e => e.preventDefault()}
+                        onClick={() => {
+                          setColor(color);
+                          setShowColorPicker(false);
+                        }}
+                        className="w-8 h-8 rounded border-2 border-neutral-300 hover:border-neutral-500 hover:scale-105 transition-all relative group"
+                        style={{backgroundColor: color}}
+                        title={color}
+                      >
+                        {selectedColor === color && (
+                          <div className="absolute inset-0 flex items-center justify-center">
+                            <div className="w-2 h-2 rounded-full bg-white shadow-lg" />
+                          </div>
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Link */}
+      <div className="relative pr-2 border-r border-neutral-200">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={toggleLinkInput}
+          data-active={editor.isActive('link')}
+          className="h-8 w-8 data-[active=true]:bg-neutral-200"
+        >
+          <Link className="h-4 w-4" />
+        </Button>
+        {showLinkInput && (
+          <div className="absolute top-10 right-0 bg-white border border-neutral-200 rounded-lg shadow-lg p-2 z-50 min-w-max">
+            <div className="flex gap-2 mb-2">
+              <input
+                type="url"
+                value={linkUrl}
+                onChange={e => setLinkUrl(e.target.value)}
+                placeholder="https://example.com"
+                className="px-2 py-1 text-sm border border-neutral-200 rounded w-64"
+                onKeyDown={e => {
+                  if (e.key === 'Enter') {
+                    addLink();
+                  } else if (e.key === 'Escape') {
+                    setShowLinkInput(false);
+                    setLinkUrl('');
+                  }
+                }}
+                autoFocus
+              />
+              <Button type="button" size="sm" onMouseDown={e => e.preventDefault()} onClick={addLink}>
+                {editor.isActive('link') ? 'Update' : 'Add'}
+              </Button>
+            </div>
+            {editor.isActive('link') && (
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="destructive"
+                  onMouseDown={e => e.preventDefault()}
+                  onClick={removeLink}
+                >
+                  Remove Link
+                </Button>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+
+      {/* Image */}
+      <div className="relative">
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          onMouseDown={e => e.preventDefault()}
+          onClick={() => setShowImageInput(!showImageInput)}
+          className="h-8 w-8"
+        >
+          <ImageIcon className="h-4 w-4" />
+        </Button>
+        {showImageInput && (
+          <div className="absolute top-10 right-0 bg-white border border-neutral-200 rounded-lg shadow-lg p-2 z-50 min-w-max">
+            <div className="flex gap-2">
+              <input
+                type="url"
+                value={imageUrl}
+                onChange={e => setImageUrl(e.target.value)}
+                placeholder="https://example.com/image.jpg"
+                className="px-2 py-1 text-sm border border-neutral-200 rounded w-64"
+                onKeyDown={e => {
+                  if (e.key === 'Enter') {
+                    addImage();
+                  } else if (e.key === 'Escape') {
+                    setShowImageInput(false);
+                    setImageUrl('');
+                  }
+                }}
+                autoFocus
+              />
+              <Button type="button" size="sm" onMouseDown={e => e.preventDefault()} onClick={addImage}>
+                Add
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}