perfected

Author: SENODROOM

src/pages/SequentialCircuits/SeqIntro.jsx

@@ -8,6 +8,7 @@ import SeqGridData from "./data/SeqGridData";
 import SeqBoxData from "./data/SeqBoxData";
 import SeqBoxInfo from "./components/SeqBoxInfo";
 import SeqBoxSuccess from "./components/SeqBoxSuccess";
+import SeqTableData from "./data/SeqTableData";
 
 const SeqIntro = () => (
   <SeqLayout
@@ -24,7 +25,7 @@ const SeqIntro = () => (
         allow the circuit to "remember" previous states.
       </p>
 
-      <SeqTable />
+      <SeqTable data={SeqTableData.sequentialcircuit} />
 
       <h2>General Model</h2>
       <p>Every sequential circuit has three fundamental parts:</p>

src/pages/SequentialCircuits/SeqLatches.jsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import SeqLayout from "./SeqLayout";
 import SeqBox from "./components/SeqBox";
 import SeqBoxData from "./data/SeqBoxData";
+import SeqTable from "./components/SeqTable";
+import SeqTableData from "./data/SeqTableData";
 
 const SRLatchSim = () => {
   const [S, setS] = useState(0);
@@ -135,49 +137,7 @@ const SeqLatches = () => (
         <strong>Q</strong> and <strong>Q̄</strong>.
       </p>
 
-      <div className="seq-table-wrap">
-        <table className="seq-table">
-          <thead>
-            <tr>
-              <th>S</th>
-              <th>R</th>
-              <th>Q (next)</th>
-              <th>Q̄ (next)</th>
-              <th>Action</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>0</td>
-              <td>0</td>
-              <td>Q</td>
-              <td>Q̄</td>
-              <td>No change (memory)</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>0</td>
-              <td>1</td>
-              <td>0</td>
-              <td>Set</td>
-            </tr>
-            <tr>
-              <td>0</td>
-              <td>1</td>
-              <td>0</td>
-              <td>1</td>
-              <td>Reset</td>
-            </tr>
-            <tr>
-              <td>1</td>
-              <td>1</td>
-              <td>?</td>
-              <td>?</td>
-              <td>⚠ Forbidden</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      <SeqTable data={SeqTableData.SRLatch} />
 
       <SRLatchSim />
 

src/pages/SequentialCircuits/components/SeqTable.jsx

@@ -1,44 +1,30 @@
-export default function SeqTable() {
+import React from "react";
+
+export default function SeqTable({ data }) {
+  if (!data) return null; // Handle empty data gracefully
+  const { headers, rows } = data;
+  const keys = headers.map((header) => header.toLowerCase());
+
   return (
-    <>
-      <div className="seq-table-wrap">
-        <table className="seq-table">
-          <thead>
-            <tr>
-              <th>Property</th>
-              <th>Combinational</th>
-              <th>Sequential</th>
+    <div className="seq-table-wrap">
+      <table className="seq-table">
+        <thead>
+          <tr>
+            {headers.map((header, index) => (
+              <th key={index}>{header}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {rows.map((row, index) => (
+            <tr key={index}>
+              {keys.map((key, i) => (
+                <td key={i}>{row[key]}</td>
+              ))}
             </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Output depends on</td>
-              <td>Current inputs only</td>
-              <td>Inputs + stored state</td>
-            </tr>
-            <tr>
-              <td>Memory elements</td>
-              <td>None</td>
-              <td>Flip-flops / Latches</td>
-            </tr>
-            <tr>
-              <td>Feedback paths</td>
-              <td>No</td>
-              <td>Yes</td>
-            </tr>
-            <tr>
-              <td>Clock required</td>
-              <td>No (usually)</td>
-              <td>Yes (synchronous)</td>
-            </tr>
-            <tr>
-              <td>Examples</td>
-              <td>Adder, Mux, Decoder</td>
-              <td>Counter, Register, FSM</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </>
+          ))}
+        </tbody>
+      </table>
+    </div>
   );
 }

src/pages/SequentialCircuits/data/SeqTableData.js

@@ -0,0 +1,56 @@
+// SeqTableData.js
+const SeqTableData = {
+  sequentialcircuit: {
+    headers: ["Property", "Combinational", "Sequential"],
+    rows: [
+      {
+        property: "Output depends on",
+        combinational: "Current inputs only",
+        sequential: "Inputs + stored state",
+      },
+      {
+        property: "Memory elements",
+        combinational: "None",
+        sequential: "Flip-flops / Latches",
+      },
+      {
+        property: "Feedback paths",
+        combinational: "No",
+        sequential: "Yes",
+      },
+      {
+        property: "Clock required",
+        combinational: "No (usually)",
+        sequential: "Yes (synchronous)",
+      },
+      {
+        property: "Examples",
+        combinational: "Adder, Mux, Decoder",
+        sequential: "Counter, Register, FSM",
+      },
+    ],
+  },
+  SRLatch: {
+    headers: ["S", "R", "Q (next)", "Q̄ (next)", "Action"],
+    rows: [
+      {
+        S: "0",
+        R: "0",
+        "Q (next)": "Q",
+        "Q̄ (next)": "Q̄",
+        Action: "No change (memory)",
+      },
+      { S: "1", R: "0", "Q (next)": "1", "Q̄ (next)": "0", Action: "Set" },
+      { S: "0", R: "1", "Q (next)": "0", "Q̄ (next)": "1", Action: "Reset" },
+      {
+        S: "1",
+        R: "1",
+        "Q (next)": "?",
+        "Q̄ (next)": "?",
+        Action: "⚠ Forbidden",
+      },
+    ],
+  },
+};
+
+export default SeqTableData;