feat(frontend): add new field, new field entry, save buttons to edit profile page

frontend/components/Button.tsx

@@ -10,6 +10,7 @@ export interface Props {
   onClick?: MouseEventHandler<HTMLButtonElement>;
   style?: ButtonStyle;
   bold?: boolean;
+  noRound?: boolean;
   children?: ReactNode;
 }
 
@@ -33,7 +34,9 @@ function PrimaryButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 rounded-md text-white"
+      className={`bg-blue-500 dark:bg-blue-500 hover:bg-blue-700 hover:dark:bg-blue-800 p-2 ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>
@@ -45,7 +48,9 @@ function SuccessButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 rounded-md text-white"
+      className={`bg-green-600 dark:bg-green-700 hover:bg-green-700 hover:dark:bg-green-800 p-2 ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>
@@ -57,7 +62,9 @@ function DangerButton(props: Props) {
     <button
       type="button"
       onClick={props.onClick}
-      className="bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2 rounded-md text-white"
+      className={`bg-red-600 dark:bg-red-700 hover:bg-red-700 hover:dark:bg-red-800 p-2  ${
+        !props.noRound && "rounded-md"
+      } text-white`}
     >
       <span className={props.bold ? "font-bold" : ""}>{props.children}</span>
     </button>

frontend/components/Editable.tsx

@@ -4,12 +4,14 @@ import {
   HandThumbsUp,
   Heart,
   People,
+  Plus,
   Trash3,
 } from "react-bootstrap-icons";
 
 import Card from "./Card";
 import TextInput from "./TextInput";
 import Button, { ButtonStyle } from "./Button";
+import { useState } from "react";
 
 export interface EditField {
   id: number;
@@ -28,6 +30,8 @@ export enum PronounChoice {
 type EditableCardProps = {
   field: EditField;
   onChangeName: React.ChangeEventHandler<HTMLInputElement>;
+  onChangePronoun: React.ChangeEventHandler<HTMLInputElement>;
+  onAddPronoun(pronoun: string): void;
   onChangeFavourite(
     e: React.MouseEvent<HTMLButtonElement>,
     entry: string
@@ -40,6 +44,8 @@ type EditableCardProps = {
 };
 
 export function EditableCard(props: EditableCardProps) {
+  const [input, setInput] = useState("");
+
   const footer = (
     <div className="flex justify-between">
       <TextInput value={props.field.name} onChange={props.onChangeName} />
@@ -55,8 +61,12 @@ export function EditableCard(props: EditableCardProps) {
         {Object.keys(props.field.pronouns).map((pronoun, index) => {
           const choice = props.field.pronouns[pronoun];
           return (
-            <li className="flex justify-between my-1" key={index}>
-              <div>{pronoun}</div>
+            <li className="flex justify-between my-1 items-center" key={index}>
+              <TextInput
+                value={pronoun}
+                prevValue={pronoun}
+                onChange={props.onChangePronoun}
+              />
               <div className="rounded-md">
                 <button
                   type="button"
@@ -123,6 +133,18 @@ export function EditableCard(props: EditableCardProps) {
             </li>
           );
         })}
+        <li className="flex justify-between my-1 items-center">
+          <TextInput value={input} onChange={(e) => setInput(e.target.value)} />
+          <Button
+            style={ButtonStyle.success}
+            onClick={() => {
+              props.onAddPronoun(input);
+              setInput("");
+            }}
+          >
+            <Plus aria-hidden className="inline" /> Add
+          </Button>
+        </li>
       </ul>
     </Card>
   );

frontend/components/TextInput.tsx

@@ -2,6 +2,7 @@ import { ChangeEventHandler } from "react";
 
 export type Props = {
   contrastBackground?: boolean;
+  prevValue?: string;
   defaultValue?: string;
   value?: string;
   onChange?: ChangeEventHandler<HTMLInputElement>;
@@ -15,6 +16,7 @@ export default function TextInput(props: Props) {
   return (
     <input
       type="text"
+      data-prev-value={props.prevValue ?? props.value}
       className={`p-1 lg:p-2 rounded-md ${bg} border-slate-300 text-black dark:border-slate-900 dark:text-white`}
       defaultValue={props.defaultValue}
       value={props.value}