aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/examples/kitchen-sink/packages/ui/src/CounterButton.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'examples/kitchen-sink/packages/ui/src/CounterButton.tsx')
-rw-r--r--examples/kitchen-sink/packages/ui/src/CounterButton.tsx45
1 files changed, 45 insertions, 0 deletions
diff --git a/examples/kitchen-sink/packages/ui/src/CounterButton.tsx b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx
new file mode 100644
index 0000000..ec99b39
--- /dev/null
+++ b/examples/kitchen-sink/packages/ui/src/CounterButton.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+
+export const CounterButton = () => {
+ const [count, setCount] = React.useState(0);
+ return (
+ <div
+ style={{
+ background: `rgba(0,0,0,0.05)`,
+ borderRadius: `8px`,
+ padding: "1.5rem",
+ fontWeight: 500,
+ }}
+ >
+ <p style={{ margin: "0 0 1.5rem 0" }}>
+ This component is from{" "}
+ <code
+ style={{
+ padding: "0.2rem 0.3rem",
+ background: `rgba(0,0,0,0.1)`,
+ borderRadius: "0.25rem",
+ }}
+ >
+ ui
+ </code>
+ </p>
+ <div>
+ <button
+ style={{
+ background: "black",
+ color: "white",
+ border: "none",
+ padding: "0.5rem 1rem",
+ borderRadius: "0.25rem",
+ display: "inline-block",
+ cursor: "pointer",
+ }}
+ type="button"
+ onClick={() => setCount((c) => c + 1)}
+ >
+ Count: {count}
+ </button>
+ </div>
+ </div>
+ );
+};