feat(engine): 🚸 Improve input variable behaviour (for loops)

apps/builder/components/shared/SwitchWithLabel.tsx

@@ -1,10 +1,19 @@
-import { FormLabel, HStack, Switch, SwitchProps } from '@chakra-ui/react'
+import {
+  chakra,
+  FormLabel,
+  HStack,
+  Switch,
+  SwitchProps,
+  Tooltip,
+} from '@chakra-ui/react'
+import { HelpCircleIcon } from 'assets/icons'
 import React, { useState } from 'react'
 
 type SwitchWithLabelProps = {
   id: string
   label: string
   initialValue: boolean
+  moreInfoContent?: string
   onCheckChange: (isChecked: boolean) => void
 } & SwitchProps
 
@@ -12,6 +21,7 @@ export const SwitchWithLabel = ({
   id,
   label,
   initialValue,
+  moreInfoContent,
   onCheckChange,
   ...props
 }: SwitchWithLabelProps) => {
@@ -23,9 +33,18 @@ export const SwitchWithLabel = ({
   }
   return (
     <HStack justifyContent="space-between">
-      <FormLabel htmlFor={id} mb="0">
-        {label}
-      </FormLabel>
+      <HStack>
+        <FormLabel htmlFor={id} mb="0" mr="0">
+          {label}
+        </FormLabel>
+        {moreInfoContent && (
+          <Tooltip label={moreInfoContent}>
+            <chakra.span cursor="pointer">
+              <HelpCircleIcon />
+            </chakra.span>
+          </Tooltip>
+        )}
+      </HStack>
       <Switch
         isChecked={isChecked}
         onChange={handleChange}