From 5db15b6ec7cd41cc15214f4448b064f4dd11f974 Mon Sep 17 00:00:00 2001
From: Jarred Sumner <jarred@jarredsumner.com>
Date: Fri, 20 Aug 2021 13:17:57 -0700
Subject: demos -> examples

Former-commit-id: 19a5d395bd41b0a0b854cdf749eb96149f91cbe1
---
 .../src/components/RenderCounter.tsx                | 21 +++++++++++++++++++++
 .../react-fast-refresh-test/src/components/app.tsx  | 14 ++++++++++++++
 .../src/components/button.tsx                       |  9 +++++++++
 3 files changed, 44 insertions(+)
 create mode 100644 examples/react-fast-refresh-test/src/components/RenderCounter.tsx
 create mode 100644 examples/react-fast-refresh-test/src/components/app.tsx
 create mode 100644 examples/react-fast-refresh-test/src/components/button.tsx

(limited to 'examples/react-fast-refresh-test/src/components')

diff --git a/examples/react-fast-refresh-test/src/components/RenderCounter.tsx b/examples/react-fast-refresh-test/src/components/RenderCounter.tsx
new file mode 100644
index 000000000..ed2f00b56
--- /dev/null
+++ b/examples/react-fast-refresh-test/src/components/RenderCounter.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+export function RenderCounter({ name, children }) {
+  const counter = React.useRef(1);
+  return (
+    <div className="RenderCounter">
+      <div className="RenderCounter-meta">
+        <div className="RenderCounter-title">
+          {name} rendered <strong>{counter.current++} times</strong>
+        </div>
+        <div className="RenderCounter-lastRender">
+          LAST RENDER:{" "}
+          {new Intl.DateTimeFormat([], {
+            timeStyle: "long",
+          }).format(new Date())}
+        </div>
+      </div>
+      <div className="RenderCounter-children">{children}</div>
+    </div>
+  );
+}
diff --git a/examples/react-fast-refresh-test/src/components/app.tsx b/examples/react-fast-refresh-test/src/components/app.tsx
new file mode 100644
index 000000000..2edc02545
--- /dev/null
+++ b/examples/react-fast-refresh-test/src/components/app.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Button } from "./Button";
+import { RenderCounter } from "./RenderCounter";
+export function App() {
+  return (
+    <RenderCounter name="App">
+      <div className="AppRoot">
+        <h1>This is the root element</h1>
+
+        <Button>Click</Button>
+      </div>
+    </RenderCounter>
+  );
+}
diff --git a/examples/react-fast-refresh-test/src/components/button.tsx b/examples/react-fast-refresh-test/src/components/button.tsx
new file mode 100644
index 000000000..4c3388670
--- /dev/null
+++ b/examples/react-fast-refresh-test/src/components/button.tsx
@@ -0,0 +1,9 @@
+import { RenderCounter } from "./RenderCounter";
+
+export const Button = ({ children }) => {
+  return (
+    <RenderCounter name="Button">
+      <div className="Button">{children}</div>
+    </RenderCounter>
+  );
+};
-- 
cgit v1.2.3