feat: new components

examples/web/react/app.tsx

@@ -10,13 +10,18 @@ export const App = () => {
     const getText = () => `Hello World ${count}`;
     const onClick = () => setCount(count + 1);
     const pairs = () => [
-        <Pair key="tobias" name={"Tobias"} value={`Count ${count}`}></Pair>,
-        <Pair key="matias" name={"Matias"} value={"3"}></Pair>
+        <Pair key="tobias" name={"Tobias"} value={`Count ${count}`} />,
+        <Pair key="matias" name={"Matias"} value={"3"} />,
+        <Pair
+            key="button"
+            name={"Button"}
+            valueNode={<Button text="NEO" size={"large"} style={["simple"]} />}
+        />
     ];
     return (
         <>
             <Button text={getText()} onClick={onClick} />
-            <Info pairs={pairs()}></Info>
+            <Info pairs={pairs()} />
         </>
     );
 };

examples/web/react/components/pair/pair.tsx

-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 
 import "./pair.css";
 
 type PairProps = {
     name: string;
     value?: string;
+    valueNode?: ReactNode;
     style?: string[];
     onNameClick?: () => void;
     onValueClick?: () => void;
@@ -13,6 +14,7 @@ type PairProps = {
 export const Pair: FC<PairProps> = ({
     name,
     value,
+    valueNode,
     style = [],
     onNameClick,
     onValueClick
@@ -26,7 +28,7 @@ export const Pair: FC<PairProps> = ({
                 {name}
             </dt>
             <dd className={classes()} onClick={_onValueClick}>
-                {value ?? ""}
+                {valueNode ?? value ?? ""}
             </dd>
         </>
     );