From ae290aa281b4ab9c15048d039753a12891c51f57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 18 Jul 2022 07:33:29 +0100
Subject: [PATCH] feat: new tuple component
---
examples/web/react/components/index.ts | 1 +
examples/web/react/components/tuple/tuple.css | 0
examples/web/react/components/tuple/tuple.tsx | 35 +++++++++++++++++++
3 files changed, 36 insertions(+)
create mode 100644 examples/web/react/components/tuple/tuple.css
create mode 100644 examples/web/react/components/tuple/tuple.tsx
diff --git a/examples/web/react/components/index.ts b/examples/web/react/components/index.ts
index 34aa90a0..f15a18d8 100644
--- a/examples/web/react/components/index.ts
+++ b/examples/web/react/components/index.ts
@@ -1 +1,2 @@
export * from "./button/button";
+export * from "./tuple/tuple";
diff --git a/examples/web/react/components/tuple/tuple.css b/examples/web/react/components/tuple/tuple.css
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/web/react/components/tuple/tuple.tsx b/examples/web/react/components/tuple/tuple.tsx
new file mode 100644
index 00000000..518fa933
--- /dev/null
+++ b/examples/web/react/components/tuple/tuple.tsx
@@ -0,0 +1,35 @@
+import React, { FC } from "react";
+
+import "./tuple.css";
+
+type TupleProps = {
+ key: string;
+ value?: string;
+ style?: string[];
+ onKeyClick?: () => void;
+ onValueClick?: () => void;
+};
+
+export const Tuple: FC<TupleProps> = ({
+ key,
+ value,
+ style = [],
+ onKeyClick,
+ onValueClick
+}) => {
+ const classes = () => ["table-entry", ...style].join(" ");
+ const _onKeyClick = () => (onKeyClick ? onKeyClick() : undefined);
+ const _onValueClick = () => (onValueClick ? onValueClick() : undefined);
+ return (
+ <>
+ <dt className={classes()} onClick={_onKeyClick}>
+ {key}
+ </dt>
+ <dd className={classes()} onClick={_onValueClick}>
+ {value ?? ""}
+ </dd>
+ </>
+ );
+};
+
+export default Tuple;
--
GitLab