add: frontend update

frontend/src/components/PortAndInterface.tsx

@@ -1,21 +1,20 @@
-import { AutocompleteItem, Select, Space, Title } from "@mantine/core"
-import React, { useEffect, useState } from "react"
-import { ipInterfacesQuery } from "../js/utils";
+import { Box, Space, Title } from "@mantine/core"
+import React from "react"
 import PortInput from "./PortInput";
 import { UseFormReturnType } from "@mantine/form/lib/types";
 import { InterfaceInput } from "./InterfaceInput";
 
-interface ItemProps extends AutocompleteItem {
+type ItemProps = {
+    value: string;
     netint: string;
-}
+} & any
 
 const AutoCompleteItem = React.forwardRef<HTMLDivElement, ItemProps>(
-    ({ netint, value, ...props }: ItemProps, ref) => <div ref={ref} {...props}>
+    ({ netint, value, ...props }, ref) => <Box ref={ref} {...props}>
             ( <b>{netint}</b> ) -{">"} <b>{value}</b> 
-    </div>
+    </Box>
 );
 
-
 export default function PortAndInterface({ form, int_name, port_name, label, orientation }:{ form:UseFormReturnType<any>, int_name:string, port_name:string, label?:string, orientation?:"line"|"column" }) {
    
 
@@ -24,7 +23,7 @@ export default function PortAndInterface({ form, int_name, port_name, label, ori
         {label?<>
             <Title order={6}>{label}</Title>
             <Space h="xs" /></> :null}
-            <div className={(!orientation || orientation == "line")?'center-flex':"center-flex-row"} style={{width:"100%"}}>
+            <Box className={(!orientation || orientation == "line")?'center-flex':"center-flex-row"} style={{width:"100%"}}>
                 <InterfaceInput
                     {...form.getInputProps(int_name)}
                 />
@@ -32,6 +31,6 @@ export default function PortAndInterface({ form, int_name, port_name, label, ori
                     <><Space w="sm" /><span style={{marginTop:"-3px", fontSize:"1.5em"}}>:</span><Space w="sm" /></>:
                     <Space h="md" />}
                 <PortInput {...form.getInputProps(port_name)} />
-            </div>
+            </Box>
     </>
 }