From 020ce327794089995f6b4511cfca1e949a7eab03 Mon Sep 17 00:00:00 2001
From: Jarred Sumner <jarred@jarredsumner.com>
Date: Sat, 19 Jun 2021 18:30:32 -0700
Subject: color looper i'll probably get rid of

Former-commit-id: 5015c6a96964c23154509bc26633c18ce36aa9ff
---
 demos/simple-react/src/main.tsx | 69 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 demos/simple-react/src/main.tsx

(limited to 'demos/simple-react/src/main.tsx')

diff --git a/demos/simple-react/src/main.tsx b/demos/simple-react/src/main.tsx
new file mode 100644
index 000000000..1a9948fe8
--- /dev/null
+++ b/demos/simple-react/src/main.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+
+export const Main = ({ productName }) => {
+  return (
+    <>
+      <header>
+        <div className="Title">CSS HMR Stress Test</div>
+        <p className="Description">
+          This page visually tests how quickly a bundler can update CSS over Hot
+          Module Reloading.
+        </p>
+      </header>
+      <main className="main">
+        <section className="ProgressSection">
+          <p className="Subtitle">
+            <span className="Subtitle-part">
+              Ran:&nbsp;<span className="timer"></span>
+            </span>
+          </p>
+
+          <div className="ProgressBar-container">
+            <div className="ProgressBar"></div>
+          </div>
+          <div className="SectionLabel">
+            The progress bar should move from left to right smoothly.
+          </div>
+        </section>
+
+        <section>
+          <div className="Spinners">
+            <div className="Spinner-container Spinner-1">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-2">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-3">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-4">
+              <div className="Spinner"></div>
+            </div>
+          </div>
+          <div className="SectionLabel">
+            The spinners should rotate &amp; change color smoothly.
+          </div>
+        </section>
+      </main>
+      <footer>
+        <div className="SectionLabel FooterLabel">
+          There are no CSS animations on this page.
+        </div>
+
+        <div className="Bundler-container">
+          <div className="Bundler">{productName}</div>
+          <div className="Bundler-updateRate">
+            Saving a css file every&nbsp;
+            <span className="highlight">
+              <span className="interval"></span>ms
+            </span>
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+};
-- 
cgit v1.2.3