refacotr: made info use children instead of props

examples/web/react/app.tsx

@@ -15,34 +15,6 @@ export const App = () => {
     const [count, setCount] = useState(0);
     const getText = () => `Hello World ${count}`;
     const onClick = () => setCount(count + 1);
-    const pairs = () => [
-        <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />,
-        <Pair key="matias" name={"Matias"} value={"3"} />,
-        <Pair
-            key="button-tobias"
-            name={"Button Increment"}
-            valueNode={
-                <ButtonIncrement
-                    value={200}
-                    delta={100}
-                    min={0}
-                    suffix={"Hz"}
-                />
-            }
-        />,
-        <Pair
-            key="button-cpu"
-            name={"Button Switch"}
-            valueNode={
-                <ButtonSwitch
-                    options={["NEO", "CLASSIC"]}
-                    size={"large"}
-                    style={["simple"]}
-                    onChange={(v) => alert(v)}
-                />
-            }
-        />
-    ];
     return (
         <>
             <Button text={getText()} onClick={onClick} />
@@ -52,7 +24,34 @@ export const App = () => {
                 imageAlt="tobias"
                 onClick={onClick}
             />
-            <Info pairs={pairs()} />
+            <Info>
+                <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />
+                <Pair key="matias" name={"Matias"} value={"3"} />
+                <Pair
+                    key="button-tobias"
+                    name={"Button Increment"}
+                    valueNode={
+                        <ButtonIncrement
+                            value={200}
+                            delta={100}
+                            min={0}
+                            suffix={"Hz"}
+                        />
+                    }
+                />
+                <Pair
+                    key="button-cpu"
+                    name={"Button Switch"}
+                    valueNode={
+                        <ButtonSwitch
+                            options={["NEO", "CLASSIC"]}
+                            size={"large"}
+                            style={["simple"]}
+                            onChange={(v) => alert(v)}
+                        />
+                    }
+                />
+            </Info>
         </>
     );
 };

examples/web/react/components/info/info.tsx

@@ -3,7 +3,7 @@ import React, { FC, ReactNode } from "react";
 import "./info.css";
 
 type InfoProps = {
-    pairs?: ReactNode[];
+    children?: ReactNode;
     style?: string[];
 };
 
@@ -18,9 +18,9 @@ type InfoProps = {
  * to build the info pairs.
  * @returns The info component with the associated pairs.
  */
-export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
+export const Info: FC<InfoProps> = ({ children = [], style = [] }) => {
     const classes = () => ["info", ...style].join(" ");
-    return <dl className={classes()}>{pairs}</dl>;
+    return <dl className={classes()}>{children}</dl>;
 };
 
 export default Info;