Add inline image add/remove

web/app/ui/input/image-upload.tsx

@@ -0,0 +1,52 @@
+import { FlightFormSchema } from "@/util/types";
+import { FileInput, FileInputProps, Pill } from "@mantine/core";
+import { UseFormReturnType } from "@mantine/form";
+import { randomId } from "@mantine/hooks";
+import { IconPhoto } from "@tabler/icons-react";
+import { Dispatch, SetStateAction } from "react";
+
+export default function ImageUpload({
+  value,
+  setValue,
+  label = "",
+  placeholder = "",
+  mt = "",
+}: {
+  value: File[];
+  setValue: Dispatch<SetStateAction<File[]>>;
+  label?: string;
+  placeholder?: string;
+  mt?: string;
+}) {
+  const ValueComponent: FileInputProps["valueComponent"] = ({ value }) => {
+    if (value === null) {
+      return null;
+    }
+
+    if (Array.isArray(value)) {
+      return (
+        <Pill.Group>
+          {value.map((file) => (
+            <Pill key={randomId()}>{file.name}</Pill>
+          ))}
+        </Pill.Group>
+      );
+    }
+
+    return <Pill>{value.name}</Pill>;
+  };
+
+  return (
+    <FileInput
+      label={label}
+      placeholder={placeholder}
+      multiple
+      mt={mt}
+      accept="image/*"
+      valueComponent={ValueComponent}
+      rightSectionPointerEvents="none"
+      rightSection={<IconPhoto />}
+      onChange={setValue}
+    />
+  );
+}

web/app/ui/input/list-input.tsx

@@ -5,10 +5,12 @@ export default function ListInput({
   label,
   value,
   setValue,
+  canAdd = true,
 }: {
   label: string;
   value: string[];
   setValue: Dispatch<SetStateAction<string[]>>;
+  canAdd?: boolean;
 }) {
   const [inputValue, setInputValue] = useState<string>("");
 
@@ -43,11 +45,13 @@ export default function ListInput({
             {item}
           </Pill>
         ))}
-        <PillsInput.Field
-          value={inputValue}
-          onChange={(event) => setInputValue(event.currentTarget.value)}
-          onKeyDown={handleKeyDown}
-        />
+        {canAdd ? (
+          <PillsInput.Field
+            value={inputValue}
+            onChange={(event) => setInputValue(event.currentTarget.value)}
+            onKeyDown={handleKeyDown}
+          />
+        ) : null}
       </Pill.Group>
     </PillsInput>
   );