Added copy-to-clipboard feature for code blocks and updated chapter c…

app/components/CodeBlock.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+
+interface CodeBlockProps {
+  code: string;
+}
+
+export const CodeBlock = ({ code }: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code.trim());
+
+      setCopied(true);
+
+      setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error("Failed to copy:", error);
+    }
+  };
+
+  return (
+    <div className="relative mt-4 w-full overflow-hidden">
+
+      {/* Copy Button */}
+      <button
+        onClick={handleCopy}
+        aria-label="Copy code"
+        className="
+          absolute right-4 top-4 z-20
+          flex items-center gap-1
+          rounded-md
+          border border-[#c7a669]
+          bg-[#f3e7c2]
+          px-3 py-1.5
+          text-xs font-medium
+          text-[#3a2a14]
+          shadow-sm
+          transition-all duration-200
+          hover:bg-[#c7a669]
+          hover:text-white
+          active:scale-95
+        "
+      >
+        {copied ? (
+          <>
+            <Check size={14} />
+            Copied!
+          </>
+        ) : (
+          <>
+            <Copy size={14} />
+            Copy
+          </>
+        )}
+      </button>
+
+      {/* Code Block */}
+      <pre
+        className="
+          w-full
+          overflow-x-auto
+          rounded-xl
+          border border-[#24344d]
+          bg-[#101b2d]
+          p-6
+          pt-16
+          text-[15px]
+          leading-7
+          text-[#98f5a5]
+          shadow-inner
+          whitespace-pre
+        "
+      >
+        <code className="font-mono block min-w-max">
+          {code.trim()}
+        </code>
+      </pre>
+    </div>
+  );
+};

app/sem1/c/content/chapter1.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import Image from "next/image";
+import { CodeBlock } from "../../../components/CodeBlock";
 
 export const Ch1Content = () => {
   return (
@@ -16,16 +19,27 @@ export const Ch1Content = () => {
       {/* Fundamentals */}
       <section>
         <h3 className="section-heading">Fundamentals of Computing</h3>
+
         <ul className="section-list">
-          <li>Computing is using algorithms and machines to transform raw data into useful information.</li>
-          <li>Main purpose: automate tasks, solve problems and perform calculations.</li>
-          <li>Example: Sorting marks to find the highest scorer.</li>
+          <li>
+            Computing is using algorithms and machines to transform raw data into useful information.
+          </li>
+          <li>
+            Main purpose: automate tasks, solve problems and perform calculations.
+          </li>
+          <li>
+            Example: Sorting marks to find the highest scorer.
+          </li>
         </ul>
 
         <div className="p-4 my-4 rounded-lg shadow-sm border border-[#c7a669] bg-[#f0ddb6]">
-          <div className="font-semibold text-[#3a2a14]">Quick Example</div>
+          <div className="font-semibold text-[#3a2a14]">
+            Quick Example
+          </div>
+
           <div className="mt-2 text-[#2b1d0f]">
-            Input: [72, 89, 34, 91] <br />
+            Input: [72, 89, 34, 91]
+            <br />
             Output: [91, 89, 72, 34]
           </div>
         </div>
@@ -36,11 +50,15 @@ export const Ch1Content = () => {
       {/* History */}
       <section>
         <h3 className="section-heading">Historical Perspective</h3>
+
         <ul className="section-list">
           <li>Abacus used for basic calculations.</li>
           <li>Mechanical calculators such as Pascaline and Leibniz machine.</li>
           <li>Babbage&apos;s Analytical Engine introduced programmability.</li>
-          <li>Electronic development: vacuum tubes, transistors, ICs, microprocessors.</li>
+          <li>
+            Electronic development: vacuum tubes, transistors, ICs,
+            microprocessors.
+          </li>
           <li>Modern computing includes personal computers, cloud, AI and IoT.</li>
         </ul>
 
@@ -51,7 +69,6 @@ export const Ch1Content = () => {
           width={1000}
           height={350}
         />
-
       </section>
 
       <hr className="my-6 border-[#c7a669] opacity-40" />
@@ -61,9 +78,15 @@ export const Ch1Content = () => {
         <h3 className="section-heading">Early Computers and Machines</h3>
 
         <ul className="section-list">
-          <li><strong>Mechanical:</strong> Difference Engine.</li>
-          <li><strong>Electromechanical:</strong> Zuse machines, punched card devices.</li>
-          <li><strong>Electronic:</strong> ENIAC and EDVAC.</li>
+          <li>
+            <strong>Mechanical:</strong> Difference Engine.
+          </li>
+          <li>
+            <strong>Electromechanical:</strong> Zuse machines, punched card devices.
+          </li>
+          <li>
+            <strong>Electronic:</strong> ENIAC and EDVAC.
+          </li>
         </ul>
 
         <Image
@@ -73,7 +96,6 @@ export const Ch1Content = () => {
           width={850}
           height={380}
         />
-
       </section>
 
       <hr className="my-6 border-[#c7a669] opacity-40" />
@@ -98,23 +120,30 @@ export const Ch1Content = () => {
           width={900}
           height={400}
         />
-
       </section>
 
       <hr className="my-6 border-[#c7a669] opacity-40" />
 
       {/* Problems */}
       <section>
-        <h3 className="section-heading">Problems and Algorithm Characteristics</h3>
+        <h3 className="section-heading">
+          Problems and Algorithm Characteristics
+        </h3>
 
         <ul className="section-list">
-          <li>Well-defined problem: has clear input, clear output and defined end state.</li>
+          <li>
+            Well-defined problem: has clear input, clear output and defined end state.
+          </li>
           <li>Ill-defined problem: unclear goals or conditions.</li>
-          <li>Algorithm characteristics: finiteness, definiteness, input, output, effectiveness.</li>
+          <li>
+            Algorithm characteristics: finiteness, definiteness, input,
+            output, effectiveness.
+          </li>
         </ul>
 
         <div className="p-3 my-3 rounded border-l-4 border-[#b8925d] bg-[#f7e7bf] text-[#2b1d0f]">
-          Tip: In exam answers, clearly state if the problem is well-defined and list algorithm characteristics.
+          Tip: In exam answers, clearly state if the problem is well-defined
+          and list algorithm characteristics.
         </div>
       </section>
 
@@ -123,36 +152,51 @@ export const Ch1Content = () => {
       {/* Pseudocode */}
       <section>
         <h3 className="section-heading">Pseudo-code and Flowcharts</h3>
+
         <ul className="section-list">
-          <li>Pseudo-code expresses the steps of a solution in simple English-like statements.</li>
-          <li>Flowcharts represent logic using shapes: oval (Start/End), rectangle (process), diamond (decision), parallelogram (I/O).</li>
+          <li>
+            Pseudo-code expresses the steps of a solution in simple English-like statements.
+          </li>
+          <li>
+            Flowcharts represent logic using shapes: oval (Start/End),
+            rectangle (process), diamond (decision), parallelogram (I/O).
+          </li>
         </ul>
 
         <div className="p-4 my-4 rounded-lg shadow-sm border border-[#c7a669] bg-[#f0ddb6]">
-          <div className="font-semibold text-[#3a2a14]">Pseudo-code Example: Sum of first n numbers</div>
-          <pre className="bg-[#1a2130] text-[#b0ffb4] mt-3 p-4 rounded-md text-sm overflow-auto">
-            {`READ n
+          <div className="font-semibold text-[#3a2a14]">
+            Pseudo-code Example: Sum of first n numbers
+          </div>
+
+          <CodeBlock
+            code={`READ n
 sum ← 0
+
 FOR i FROM 1 TO n
   sum ← sum + i
 END FOR
+
 PRINT sum`}
-          </pre>
+          />
         </div>
 
         <div className="p-4 my-4 rounded-lg shadow-sm border border-[#c7a669] bg-[#f3e7c2]">
-          <div className="font-semibold text-[#3a2a14]">Flowchart Structure</div>
+          <div className="font-semibold text-[#3a2a14]">
+            Flowchart Structure
+          </div>
+
           <p className="mt-2 text-[#2b1d0f]">
-            Start → Input n → Initialize sum → Loop (i ≤ n?) → Add → Update → Output sum → End
+            Start → Input n → Initialize sum → Loop (i ≤ n?) → Add → Update →
+            Output sum → End
           </p>
-          <Image
-  src="/flowchart-sum-n.png"
-  alt="flowchart-sum-n"
-  className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
-  width={750}
-  height={500}
-/>
 
+          <Image
+            src="/flowchart-sum-n.png"
+            alt="flowchart-sum-n"
+            className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
+            width={750}
+            height={500}
+          />
         </div>
       </section>
 
@@ -165,26 +209,31 @@ PRINT sum`}
         <ul className="section-list">
           <li>Memory stores data and instructions in binary.</li>
           <li>Variables represent named memory locations.</li>
-          <li>Values are actual stored data such as numbers and characters.</li>
+          <li>
+            Values are actual stored data such as numbers and characters.
+          </li>
           <li>Data types determine size and operations allowed.</li>
         </ul>
 
         <div className="p-4 my-4 rounded-lg shadow-sm border border-[#c7a669] bg-[#f0ddb6]">
-          <div className="font-semibold text-[#3a2a14]">Memory Layout Example</div>
-          <pre className="bg-[#1a2130] text-[#b0ffb4] mt-3 p-4 rounded-md text-sm overflow-auto">
-            {`Address   Content
+          <div className="font-semibold text-[#3a2a14]">
+            Memory Layout Example
+          </div>
+
+          <CodeBlock
+            code={`Address   Content
 0x1000    0x05     (integer 5)
-0x1004    0x00     
+0x1004    0x00
 0x1008    'A'      (character A)`}
-          </pre>
-          <Image
-  src="/memory-layout.png"
-  alt="memory-layout"
-  className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
-  width={800}
-  height={500}
-/>
+          />
 
+          <Image
+            src="/memory-layout.png"
+            alt="memory-layout"
+            className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
+            width={800}
+            height={500}
+          />
         </div>
       </section>
 
@@ -202,13 +251,16 @@ PRINT sum`}
         </ul>
 
         <div className="p-4 my-4 rounded-lg shadow-sm border border-[#c7a669] bg-[#f3e7c2]">
-          <div className="font-semibold text-[#3a2a14]">Assembly-like Example</div>
-          <pre className="bg-[#1a2130] text-[#b0ffb4] mt-3 p-4 rounded-md text-sm overflow-auto">
-            {`LOAD R1, 5
+          <div className="font-semibold text-[#3a2a14]">
+            Assembly-like Example
+          </div>
+
+          <CodeBlock
+            code={`LOAD R1, 5
 LOAD R2, 10
 ADD R3, R1, R2
 STORE R3, 0x200`}
-          </pre>
+          />
         </div>
       </section>
 
@@ -219,9 +271,15 @@ STORE R3, 0x200`}
         <h3 className="section-heading">Programs</h3>
 
         <ul className="section-list">
-          <li>A program is a sequence of instructions that performs a task.</li>
-          <li>Lifecycle includes writing, compiling, linking, running, testing and maintaining.</li>
-          <li>Example: Sorting program takes a list, processes it and outputs the sorted form.</li>
+          <li>
+            A program is a sequence of instructions that performs a task.
+          </li>
+          <li>
+            Lifecycle includes writing, compiling, linking, running, testing and maintaining.
+          </li>
+          <li>
+            Example: Sorting program takes a list, processes it and outputs the sorted form.
+          </li>
         </ul>
 
         <Image
@@ -231,9 +289,8 @@ STORE R3, 0x200`}
           width={980}
           height={430}
         />
-
       </section>
 
     </div>
   );
-};
+};