refactor: init

src/components/ToolContent.tsx

@@ -40,7 +40,7 @@ const FormikListenerComponent = <T,>({
 
 interface ToolContentProps<T, I> extends ToolComponentProps {
   inputComponent?: ReactNode;
-  resultComponent: ReactNode;
+  resultComponent?: ReactNode;
   renderCustomInput?: (
     values: T,
     setFieldValue: (fieldName: string, value: any) => void

src/components/ToolInputAndResult.tsx

@@ -6,18 +6,20 @@ export default function ToolInputAndResult({
   result
 }: {
   input?: ReactNode;
-  result: ReactNode;
+  result?: ReactNode;
 }) {
-  return (
-    <Grid id="tool" container spacing={2}>
-      {input && (
-        <Grid item xs={12} md={6}>
-          {input}
+  if (input || result) {
+    return (
+      <Grid id="tool" container spacing={2}>
+        {input && (
+          <Grid item xs={12} md={6}>
+            {input}
+          </Grid>
+        )}
+        <Grid item xs={12} md={input ? 6 : 12}>
+          {result}
         </Grid>
-      )}
-      <Grid item xs={12} md={input ? 6 : 12}>
-        {result}
       </Grid>
-    </Grid>
-  );
+    );
+  }
 }

src/components/input/NumericInputWithUnit.tsx

@@ -20,7 +20,7 @@ export default function NumericInputWithUnit(props: {
   value: { value: number; unit: string };
   disabled?: boolean;
   disableChangingUnit?: boolean;
-  onOwnChange: (value: { value: number; unit: string }) => void;
+  onOwnChange?: (value: { value: number; unit: string }) => void;
   defaultPrefix?: string;
 }) {
   const [inputValue, setInputValue] = useState(props.value.value);