feat: initial key value example

examples/web/react/app.tsx

 import React, { useState } from "react";
 import ReactDOM from "react-dom/client";
 
-import { Button } from "./components";
+import { Button, Info, Pair } from "./components";
 
 import "./app.css";
 
@@ -9,7 +9,16 @@ export const App = () => {
     const [count, setCount] = useState(0);
     const getText = () => `Hello World ${count}`;
     const onClick = () => setCount(count + 1);
-    return <Button text={getText()} onClick={onClick} />;
+    const pairs = () => [
+        <Pair key="tobias" name={"Tobias"} value="2"></Pair>,
+        <Pair key="matias" name={"Matias"} value="3"></Pair>
+    ];
+    return (
+        <>
+            <Button text={getText()} onClick={onClick} />
+            <Info pairs={pairs()}></Info>
+        </>
+    );
 };
 
 export const startApp = (element: string) => {

examples/web/react/components/info/info.css

+.info {
+    font-size: 24px;
+    vertical-align: top;
+}
+
+.info > dt {
+    clear: both;
+    float: left;
+    margin-top: 12px;
+}
+
+.info > dt:first-of-type {
+    margin-top: 0px;
+}
+
+.info > dd {
+    float: right;
+    margin-top: 12px;
+}
+
+.info > dd:first-of-type {
+    margin-top: 0px;
+}
+
+.info::after {
+    clear: both;
+    content: '';
+    display: block;
+}

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

-import React, { FC } from "react";
+import React, { FC, ReactNode } from "react";
 
 import "./info.css";
 
 type InfoProps = {
+    pairs?: ReactNode[];
     style?: string[];
 };
 
-export const Info: FC<InfoProps> = ({ style = [] }) => {
+export const Info: FC<InfoProps> = ({ pairs = [], style = [] }) => {
     const classes = () => ["info", ...style].join(" ");
-    return <dl className={classes()}></dl>;
+    return <dl className={classes()}>{pairs}</dl>;
 };
 
 export default Info;

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

@@ -3,27 +3,27 @@ import React, { FC } from "react";
 import "./pair.css";
 
 type PairProps = {
-    key: string;
+    name: string;
     value?: string;
     style?: string[];
-    onKeyClick?: () => void;
+    onNameClick?: () => void;
     onValueClick?: () => void;
 };
 
 export const Pair: FC<PairProps> = ({
-    key,
+    name,
     value,
     style = [],
-    onKeyClick,
+    onNameClick,
     onValueClick
 }) => {
     const classes = () => ["pair", ...style].join(" ");
-    const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined);
+    const _onNameClick = () => (onNameClick ? onNameClick() : undefined);
     const _onValueClick = () => (onValueClick ? onValueClick() : undefined);
     return (
         <>
-            <dt className={classes()} onClick={_onKeyClick}>
-                {key}
+            <dt className={classes()} onClick={_onNameClick}>
+                {name}
             </dt>
             <dd className={classes()} onClick={_onValueClick}>
                 {value ?? ""}