Move components to external library

src/components/connection/Serial.tsx

@@ -4,10 +4,9 @@ import { useForm } from 'react-hook-form';
 import { FiCheck } from 'react-icons/fi';
 
 import { useAppDispatch } from '@app/hooks/redux';
-import { Button } from '@components/generic/Button';
-import { IconButton } from '@components/generic/IconButton';
 import { serial, setConnection } from '@core/connection';
 import { connType, setConnectionParams } from '@core/slices/appSlice';
+import { Button, IconButton } from '@meshtastic/components';
 
 export const Serial = (): JSX.Element => {
   const [serialDevices, setSerialDevices] = React.useState<SerialPort[]>([]);
@@ -32,35 +31,41 @@ export const Serial = (): JSX.Element => {
 
   return (
     <form onSubmit={onSubmit} className="space-y-2">
-      {serialDevices.map((device, index) => (
-        <div
-          className="flex justify-between p-2 bg-gray-700 rounded-md"
-          key={index}
-        >
-          <div className="flex gap-4 my-auto">
-            <p>
-              Vendor: <small>{device.getInfo().usbVendorId}</small>
-            </p>
-            <p>
-              Device: <small>{device.getInfo().usbProductId}</small>
-            </p>
+      {serialDevices.length > 0 ? (
+        serialDevices.map((device, index) => (
+          <div
+            className="flex justify-between p-2 bg-gray-700 rounded-md"
+            key={index}
+          >
+            <div className="flex gap-4 my-auto">
+              <p>
+                Vendor: <small>{device.getInfo().usbVendorId}</small>
+              </p>
+              <p>
+                Device: <small>{device.getInfo().usbProductId}</small>
+              </p>
+            </div>
+            <IconButton
+              onClick={async (): Promise<void> => {
+                dispatch(
+                  setConnectionParams({
+                    type: connType.SERIAL,
+                    params: {
+                      port: device,
+                    },
+                  }),
+                );
+                await setConnection(connType.SERIAL);
+              }}
+              icon={<FiCheck />}
+            />
           </div>
-          <IconButton
-            onClick={async (): Promise<void> => {
-              dispatch(
-                setConnectionParams({
-                  type: connType.SERIAL,
-                  params: {
-                    port: device,
-                  },
-                }),
-              );
-              await setConnection(connType.SERIAL);
-            }}
-            icon={<FiCheck />}
-          />
+        ))
+      ) : (
+        <div className="h-40 border rounded-md">
+          <p>No previously connected devices found</p>
         </div>
-      ))}
+      )}
       <Button type="submit" className="mt-2 ml-auto" border>
         Connect
       </Button>