made the react components to display the card for scanned components

src/device/autoDetect/DeviceScannedComponents.tsx

@@ -0,0 +1,93 @@
+import { Box, Card, DialogContent, FormControlLabel, Radio, RadioGroup, Step, StepLabel, Stepper } from "@mui/material";
+import { cloneDeep } from "lodash";
+import { getSubtypes, Subtype } from "pbHelpers/ComponentType";
+import { pond, quack } from "protobuf-ts/pond";
+import React from "react";
+import { useEffect, useState } from "react";
+import ScannedI2C from "./ScannedI2C";
+import ComponentForm from "component/ComponentForm";
+import { Component, Device } from "models";
+
+interface Props {
+  scannedComponents: pond.ComponentAddressMap
+  device: Device
+}
+
+interface CompStep {
+  label: string;
+  completed?: boolean;
+}
+
+export default function DeviceScannedComponents(props: Props){
+  const {scannedComponents, device} = props
+  const [scannedI2C, setScannedI2C] = useState<pond.DetectI2C>()
+  const [components, setComponents] = useState<Component[]>([])
+  const [steps, setSteps] = useState<CompStep[]>([]);
+  const [currentStep, setCurrentStep] = useState(0)
+  const [settingsValid, setSettingsValid] = useState(false);
+
+  useEffect(()=>{
+    if (scannedComponents.i2c) setScannedI2C(scannedComponents.i2c)
+  },[scannedComponents])
+
+  useEffect(() => {
+    let steps: CompStep[] = []
+    components.forEach(comp => {
+      steps.push({
+        label: comp.name(),
+        completed: false
+      })
+    })
+  },[components])
+
+  const stepper = () => {
+    return (
+      <Stepper nonLinear activeStep={currentStep} style={{ width: "100%" }}>
+        {steps.map(compStep => {
+          const labelProps: {
+            optional?: React.ReactNode;
+          } = {};
+          return (
+            <Step key={compStep.label} completed={compStep.completed}>
+              <StepLabel {...labelProps}>{compStep.label}</StepLabel>
+            </Step>
+          );
+        })}
+      </Stepper>
+    );
+  };
+
+  const addComponentContent = () => {
+    return (
+      <DialogContent>
+        {stepper()}
+        <ComponentForm
+          component={components[currentStep]}
+          canEdit
+          device={device}
+          componentChanged={(component, isValid) => {
+            components[currentStep].settings = component.settings;
+            setSettingsValid(isValid);
+          }}
+        />
+      </DialogContent>
+    );
+  };
+
+
+
+  return (
+    <Card>
+      {scannedI2C && 
+        <React.Fragment>
+        <Box>I2C Components Found</Box>
+        {scannedI2C?.settings?.foundAddresses.map((addr, index) => {
+          return (
+            <ScannedI2C key={index} decimalAddress={addr} deviceProduct={device.settings.product} updateComponentList={()=>{}} />
+          )
+        })}
+        </React.Fragment>
+      }
+    </Card>
+  )
+}