more

Author: SENODROOM

src/pages/SequentialCircuits/SeqIntro.jsx

@@ -5,6 +5,7 @@ import SeqTable from "./components/SeqTable";
 import SeqGrid from "./components/SeqGrid";
 import SeqDiagram from "./components/SeqDiagram";
 import SeqGridData from "./data/SeqGridData";
+import SeqBoxData from "./data/SeqBoxData";
 import SeqBoxInfo from "./components/SeqBoxInfo";
 import SeqBoxSuccess from "./components/SeqBoxSuccess";
 
@@ -14,7 +15,7 @@ const SeqIntro = () => (
     subtitle="Understanding circuits with memory — where outputs depend on both current inputs and past history."
   >
     <div className="seq-content-body">
-      <SeqBox />
+      <SeqBox data={SeqBoxData.sequentialcircuit} />
       <h2>Combinational vs Sequential</h2>
       <p>
         In a <strong>combinational circuit</strong>, output is determined purely

src/pages/SequentialCircuits/SeqLatches.jsx

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import SeqLayout from "./SeqLayout";
+import SeqBox from "./components/SeqBox";
+import SeqBoxData from "./data/SeqBoxData";
 
 const SRLatchSim = () => {
   const [S, setS] = useState(0);
@@ -122,16 +124,7 @@ const SeqLatches = () => (
     subtitle="The simplest bistable memory elements — level-sensitive storage that responds directly to input levels."
   >
     <div className="seq-content-body">
-      <div className="seq-box">
-        <span className="seq-box-title">What is a Latch?</span>
-        <p>
-          A <strong>latch</strong> is a bistable multivibrator — a circuit with
-          two stable output states (0 and 1). It is the most primitive memory
-          element and is <strong>level-sensitive</strong>: it responds
-          continuously while the enable signal is asserted, not just at a clock
-          edge.
-        </p>
-      </div>
+      <SeqBox data={SeqBoxData.sequentialcircuit} />
 
       <h2>SR Latch — NOR Implementation</h2>
       <p>

src/pages/SequentialCircuits/components/SeqBox.jsx

@@ -1,15 +1,9 @@
-export default function SeqBox() {
+export default function SeqBox({ data }) {
+  if (!data) return null;
   return (
-    <>
-      <div className="seq-box">
-        <span className="seq-box-title">Core Definition</span>
-        <p>
-          A <strong>sequential circuit</strong> is a digital circuit whose
-          output depends not only on the current inputs but also on the{" "}
-          <strong>history of past inputs</strong>. It contains memory elements
-          that store state information between clock cycles.
-        </p>
-      </div>
-    </>
+    <div className="seq-box">
+      <span className="seq-box-title">{data.title}</span>
+      <p>{data.description()}</p>
+    </div>
   );
 }

src/pages/SequentialCircuits/data/SeqBoxData.js

@@ -0,0 +1,15 @@
+let SeqBoxData = {
+  sequentialcircuit: {
+    title: "Core Definition",
+    description: () => (
+      <>
+        A <strong>sequential circuit</strong> is a digital circuit whose output
+        depends not only on the current inputs but also on the{" "}
+        <strong>history of past inputs</strong>. It contains memory elements
+        that store state information between clock cycles.
+      </>
+    ),
+  },
+};
+
+export default SeqBoxData;