first commit

app/src/components/ui/inputs/MultiEmailInvite.tsx

@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+
+const MultiEmailInvite: React.FC = () => {
+  const [emails, setEmails] = useState<string[]>([]);
+  const [inputValue, setInputValue] = useState("");
+
+  const handleAddEmail = () => {
+    const trimmedEmail = inputValue.trim();
+
+    // Validate email
+    if (!trimmedEmail || !validateEmail(trimmedEmail)) {
+      alert("Please enter a valid email address.");
+      return;
+    }
+
+    // Check for duplicates
+    if (emails.includes(trimmedEmail)) {
+      alert("This email has already been added.");
+      return;
+    }
+
+    // Add email to the list
+    setEmails([...emails, trimmedEmail]);
+    setInputValue(""); // Clear the input field after adding
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      handleAddEmail();
+    }
+  };
+
+  const handleRemoveEmail = (emailToRemove: string) => {
+    setEmails(emails.filter((email) => email !== emailToRemove));
+  };
+
+  const validateEmail = (email: string) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+  };
+
+  const [inputFocus, setInputFocus] = useState(false);
+
+  return (
+    <div className="multi-email-invite-input-container">
+      <div className={`multi-email-invite-input${inputFocus ? " active" : ""}`}>
+        {emails.map((email, index) => (
+          <div key={index} className="entered-emails">
+            {email}
+            <span onClick={() => handleRemoveEmail(email)}>&times;</span>
+          </div>
+        ))}
+        <input
+          type="text"
+          value={inputValue}
+          onChange={(e) => setInputValue(e.target.value)}
+          onFocus={() => setInputFocus(true)}
+          onBlur={() => setInputFocus(false)}
+          onKeyDown={handleKeyDown}
+          placeholder="Enter email and press Enter or comma to seperate"
+        />
+      </div>
+      <div onClick={handleAddEmail} className="invite-button">
+        Invite
+      </div>
+      <div className="users-list-container">
+        {/* list available users */}
+      </div>
+    </div>
+  );
+};
+
+export default MultiEmailInvite;