configurable room name and perform RPC calls (#127)

src/components/config/NameValueRow.tsx

@@ -20,3 +20,43 @@ export const NameValueRow: React.FC<NameValueRowProps> = ({
     </div>
   );
 };
+
+type EditableNameValueRowProps = {
+  name: string;
+  value: string;
+  valueColor?: string;
+  onValueChange?: (value: string) => void;
+  placeholder?: string;
+  editable: boolean;
+};
+
+export const EditableNameValueRow: React.FC<EditableNameValueRowProps> = ({
+  name,
+  value,
+  valueColor = "gray-300",
+  onValueChange,
+  placeholder,
+  editable,
+}) => {
+  if (editable && onValueChange) {
+    return (
+      <div className="flex flex-row w-full items-baseline text-sm">
+        <div className="grow shrink-0 text-gray-500">{name}</div>
+        <input
+          type="text"
+          value={value}
+          onChange={(e) => onValueChange(e.target.value)}
+          className={`text-xs shrink text-${valueColor} text-right bg-transparent border-b border-gray-800 focus:outline-none focus:border-gray-600 px-2 py-0`}
+          placeholder={placeholder}
+        />
+      </div>
+    );
+  }
+  return (
+    <NameValueRow
+      name={name}
+      value={value}
+      valueColor={valueColor}
+    />
+  );
+};