From 09c51715a2c18e358f1d7c9e20c4f7b17157a708 Mon Sep 17 00:00:00 2001
From: Lucas Schumacher <technolucas@protonmail.com>
Date: Tue, 18 Jun 2024 12:03:18 -0400
Subject: [PATCH] Add state

---
 index.html | 32 +++++++++++++++++++++++++-------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/index.html b/index.html
index 204c7a9..5653237 100644
--- a/index.html
+++ b/index.html
@@ -6,17 +6,35 @@
     <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
     <script type="text/jsx">
       const app = document.getElementById('app');
+      const blurb_data = {
+        title: "Fart Man Comes To Town!",
+        blurb: "Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town believe the imminent winds of change will revitalize the towns central business district."
+      };
 
-      function Header() {
-        return(<h1>Fart man approaches...</h1>);
+      function Blurb({ title, blurb }) {
+        return (<div>
+          <h1>{ title }</h1>
+          <p>{ blurb }</p>
+          <a href="#">Read more...</a>
+        </div>);
+      }
+      function HomePage() {
+        const [blurbs, setBlurbs] = React.useState([ blurb_data ])
+        function addBlurb() {
+          setBlurbs(blurbs.concat([blurb_data]));
+        }
+        return (<>
+          {blurbs.map((blurb, i) => (
+            <Blurb key={i} {...blurb} />
+          ))}
+          <br />
+          <button onClick={addBlurb}>Load More</button>
+        </>);
       }
 
       const root = ReactDOM.createRoot(app);
-      root.render(<>
-        <Header />
-        <p>Will this controversial figure finally cause the downfall of the town? Sally Smith from town center says that she can already smell trouble brewing but other members of the town beleave the imminent winds of change will revitalize the towns central business district.</p>
-        <a href="#">Read more...</a>
-      </>);
+      root.render(<HomePage />);
+
     </script>
   </body>
 </html>