diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts index f15a18d8c2174a5b57c0244d92fb2f4df6055e07..9ab1a38f4208235f4d74bd1cecf51e12ba404ba9 100644 --- a/examples/web/react/components/index.ts +++ b/examples/web/react/components/index.ts @@ -1,2 +1,3 @@ export * from "./button/button"; -export * from "./tuple/tuple"; +export * from "./info/info"; +export * from "./pair/pair"; diff --git a/examples/web/react/components/info/info.tsx b/examples/web/react/components/info/info.tsx new file mode 100644 index 0000000000000000000000000000000000000000..6122534e720b1cdb0486e4a0d6275e62d8ffb41f --- /dev/null +++ b/examples/web/react/components/info/info.tsx @@ -0,0 +1,14 @@ +import React, { FC } from "react"; + +import "./info.css"; + +type InfoProps = { + style?: string[]; +}; + +export const Info: FC<InfoProps> = ({ style = [] }) => { + const classes = () => ["info", ...style].join(" "); + return <dl className={classes()}></dl>; +}; + +export default Info; diff --git a/examples/web/react/components/tuple/tuple.css b/examples/web/react/components/pair/pair.css similarity index 100% rename from examples/web/react/components/tuple/tuple.css rename to examples/web/react/components/pair/pair.css diff --git a/examples/web/react/components/tuple/tuple.tsx b/examples/web/react/components/pair/pair.tsx similarity index 76% rename from examples/web/react/components/tuple/tuple.tsx rename to examples/web/react/components/pair/pair.tsx index 518fa9334dec3ccc395d720f896573f83331885d..b0b9321b77f894c1ca9a74faf15ad7cd88fdeea6 100644 --- a/examples/web/react/components/tuple/tuple.tsx +++ b/examples/web/react/components/pair/pair.tsx @@ -1,8 +1,8 @@ import React, { FC } from "react"; -import "./tuple.css"; +import "./pair.css"; -type TupleProps = { +type PairProps = { key: string; value?: string; style?: string[]; @@ -10,14 +10,14 @@ type TupleProps = { onValueClick?: () => void; }; -export const Tuple: FC<TupleProps> = ({ +export const Pair: FC<PairProps> = ({ key, value, style = [], onKeyClick, onValueClick }) => { - const classes = () => ["table-entry", ...style].join(" "); + const classes = () => ["pair", ...style].join(" "); const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined); const _onValueClick = () => (onValueClick ? onValueClick() : undefined); return ( @@ -32,4 +32,4 @@ export const Tuple: FC<TupleProps> = ({ ); }; -export default Tuple; +export default Pair;