Update the "Forbidden usernames" UI (#259)

* Add new component for adding/removing forbidden name strings. Closes https://github.com/owncast/owncast/issues/1230

* make editing string styling shareable and consistent with tag editor

* Prettified Code!

Co-authored-by: gingervitis <omqmail@gmail.com>
Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>

web/components/config/edit-string-array.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable react/no-array-index-key */
+import React, { useState } from 'react';
+import { Typography, Tag } from 'antd';
+
+import TextField from './form-textfield';
+import { UpdateArgs } from '../../types/config-section';
+import { StatusState } from '../../utils/input-statuses';
+
+const { Title } = Typography;
+
+export const TAG_COLOR = '#5a67d8';
+
+interface EditStringArrayProps {
+  title: string;
+  description?: string;
+  placeholder: string;
+  maxLength?: number;
+  values: string[];
+  submitStatus?: StatusState;
+  handleDeleteIndex: (index: number) => void;
+  handleCreateString: (arg: string) => void;
+}
+
+export default function EditValueArray(props: EditStringArrayProps) {
+  const [newStringInput, setNewStringInput] = useState<string>('');
+  const {
+    title,
+    description,
+    placeholder,
+    maxLength,
+    values,
+    handleDeleteIndex,
+    handleCreateString,
+    submitStatus,
+  } = props;
+
+  const handleInputChange = ({ value }: UpdateArgs) => {
+    setNewStringInput(value);
+  };
+
+  const handleSubmitNewString = () => {
+    const newString = newStringInput.trim();
+    handleCreateString(newString);
+    setNewStringInput('');
+  };
+
+  return (
+    <div className="edit-string-array-container">
+      <Title level={3} className="section-title">
+        {title}
+      </Title>
+      <p className="description">{description}</p>
+
+      <div className="edit-current-strings">
+        {values.map((tag, index) => {
+          const handleClose = () => {
+            handleDeleteIndex(index);
+          };
+          return (
+            <Tag closable onClose={handleClose} color={TAG_COLOR} key={`tag-${tag}-${index}`}>
+              {tag}
+            </Tag>
+          );
+        })}
+      </div>
+
+      <div className="add-new-string-section">
+        <TextField
+          fieldName="string-input"
+          value={newStringInput}
+          onChange={handleInputChange}
+          onPressEnter={handleSubmitNewString}
+          maxLength={maxLength}
+          placeholder={placeholder}
+          status={submitStatus}
+        />
+      </div>
+    </div>
+  );
+}
+
+EditValueArray.defaultProps = {
+  maxLength: 50,
+  description: null,
+  submitStatus: null,
+};