reafactor: strength the typing

Author: AlexVOiceover

data/preStatements.json

@@ -0,0 +1,37 @@
+[
+  {
+    "id": "1",
+    "subject": "Eve",
+    "verb": "Support",
+    "object": "their team",
+    "isPublic": true
+  },
+  {
+    "id": "2",
+    "subject": "Eve's coding practice",
+    "verb": "Improve",
+    "object": "software quality",
+    "isPublic": false
+  },
+  {
+    "id": "3",
+    "subject": "Eve",
+    "verb": "Create",
+    "object": "innovative solutions",
+    "isPublic": true
+  },
+  {
+    "id": "4",
+    "subject": "Eve's marketing ideas",
+    "verb": "Engage",
+    "object": "potential customers",
+    "isPublic": true
+  },
+  {
+    "id": "5",
+    "subject": "Eve",
+    "verb": "Learn",
+    "object": "new technologies",
+    "isPublic": false
+  }
+]

src/App.tsx

@@ -2,22 +2,27 @@
 
 import StatementBuilder from './components/StatementBuilder';
 import StatementWizard from './components/StatementWizard';
+import StatementList from './components/StatementList';
+import { StatementsProvider } from './context/StatementsProvider';
 
 const USERNAME = 'Eve';
 
 export default function Home() {
   return (
-    <main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12'>
-      <div className='container mx-auto px-4 max-w-3xl'>
-        <h1 className='text-3xl font-bold mb-8 text-center'>
-          Statement Builders for {USERNAME}
-        </h1>
+    <StatementsProvider>
+      <main className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 py-12'>
+        <div className='container mx-auto px-4 max-w-3xl'>
+          <h1 className='text-3xl font-bold mb-8 text-center'>
+            Statement Builders for {USERNAME}
+          </h1>
 
-        <div className='bg-white rounded-xl shadow-lg p-6  '>
-          <StatementWizard onComplete={() => {}} username={USERNAME} />
-          <StatementBuilder onAddStatement={() => {}} username={USERNAME} />
+          <div className='bg-white rounded-xl shadow-lg p-6  '>
+            <StatementWizard onComplete={() => {}} username={USERNAME} />
+            <StatementBuilder username={USERNAME} />
+            <StatementList username={USERNAME} />
+          </div>
         </div>
-      </div>
-    </main>
+      </main>
+    </StatementsProvider>
   );
 }