feat: add dynamic flow app icons

packages/web/src/components/FlowAppIcons/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import type { IStep } from '@automatisch/types';
+
+import AppIcon from 'components/AppIcon';
+import IntermediateStepCount from 'components/IntermediateStepCount';
+
+type FlowAppIconsProps = {
+  steps: Partial<IStep>[];
+}
+
+export default function FlowAppIcons(props: FlowAppIconsProps) {
+  const { steps } = props;
+  const stepsCount = steps.length;
+  const firstStep = steps[0];
+  const lastStep = steps[stepsCount - 1];
+  const intermeaditeStepCount = stepsCount - 2;
+
+
+  return (
+    <>
+      <AppIcon
+        name=" "
+        variant="rounded"
+        url={firstStep.iconUrl}
+        imgProps={{ width: 30, height: 30}}
+      />
+
+      {intermeaditeStepCount > 0 && <IntermediateStepCount count={intermeaditeStepCount} />}
+
+      <AppIcon
+        name=" "
+        variant="rounded"
+        url={lastStep.iconUrl}
+      />
+    </>
+  )
+};