diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx index 0603a55420433232a63b87268971851d952ff90c..546233a5c4b630b8a2db0b53990a09950829b58f 100644 --- a/examples/web/react/app.tsx +++ b/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()} /> </> ); }; diff --git a/examples/web/react/components/pair/pair.tsx b/examples/web/react/components/pair/pair.tsx index 4b19c469d4aecf1c9246fb9015b2020ca32f7282..9e032e85bd60d460f2284b28b3b0496a95eb6951 100644 --- a/examples/web/react/components/pair/pair.tsx +++ b/examples/web/react/components/pair/pair.tsx @@ -1,10 +1,11 @@ -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> </> );