Skip to content

Added copy-to-clipboard button #74

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
raushan-2006 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added copy-to-clipboard button #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6091d1f
Added copy-to-clipboard button
May 18, 2026
5b18232
Added copy-to-clipboard button
May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 61 additions & 0 deletions app/components/CodeBlock.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
"use client";

import { useState } from "react";
import { Check, Copy } from "lucide-react";

interface CodeBlockProps {
title: string;
code: string;
}

export const CodeBlock = ({ title, code }: CodeBlockProps) => {
const [copied, setCopied] = useState(false);

const handleCopy = async () => {
try {
await navigator.clipboard.writeText(code);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (err) {
console.error("Failed to copy code: ", err);
}
};

return (
<div className="my-6 w-full block rounded-lg border border-[#c7a669]/30 bg-[#1e1b18] shadow-md overflow-hidden">
{/* Block Header Toolbar */}
<div className="flex items-center justify-between bg-[#ebdcb9] px-4 py-2.5 select-none">
<span className="font-mono text-xs font-bold tracking-wider text-[#3a2a14] uppercase">
{title}
</span>

<button
onClick={handleCopy}
className={`flex items-center gap-1.5 rounded px-2.5 py-1 font-mono text-xs font-medium transition-all duration-150 border
${
copied
? "bg-[#2d4a2e] border-[#4ade80]/40 text-[#4ade80]"
: "bg-[#fdf6e2]/60 border-[#c7a669]/30 text-[#3a2a14] hover:bg-[#fdf6e2] hover:border-[#c7a669]"
}`}
>
{copied ? (
<>
<Check className="h-3.5 w-3.5 shrink-0" />
<span>Copied!</span>
</>
) : (
<>
<Copy className="h-3.5 w-3.5 shrink-0" />
<span>Copy</span>
</>
)}
</button>
</div>

{/* Code Text Body - Flattened Layout */}
<pre className="w-full block m-0 p-5 overflow-x-auto bg-[#131110] font-mono text-sm leading-relaxed text-[#4ade80] textAlign-left">
<code className="block whitespace-pre text-[#4ade80]">{code}</code>
</pre>
</div>
);
};
27 changes: 14 additions & 13 deletions app/sem1/c/[chapter]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,11 @@ import { ArrowBigLeft, ArrowBigRight } from "lucide-react";
import { Righteous } from "next/font/google";

const righteous = Righteous({
subsets: ['latin'],
weight: '400',
variable: '--font-righteous',
});
subsets: ['latin'],
weight: '400',
variable: '--font-righteous',
});

// Chapter data
const chapters = [
{ id: "ch0", title: "Course Outline", component: Ch0Content },
{ id: "ch1", title: "Introduction to Computing", component: Ch1Content },
Expand All @@ -27,15 +26,18 @@ const chapters = [
];

type ChapterProps = {
params: { chapter: string };
params: Promise<{ chapter: string }>;
};

export default function ChapterPage({ params }: ChapterProps) {
const currentIndex = chapters.findIndex((c) => c.id === params.chapter);
export default async function ChapterPage({ params }: ChapterProps) {
// Await the asynchronous params object for Next.js 15
const resolvedParams = await params;

const currentIndex = chapters.findIndex((c) => c.id === resolvedParams.chapter);
const chapter = chapters[currentIndex];

if (!chapter) {
return <h1 className="text-2xl font-bold">Chapter not found</h1>;
return <h1 className="text-2xl font-bold p-6">Chapter not found</h1>;
}

const ChapterComponent = chapter.component;
Expand All @@ -44,14 +46,13 @@ export default function ChapterPage({ params }: ChapterProps) {

return (
<div className="flex flex-col bg-[#1B0D00] min-h-full p-2 pt-6 text-[#e2d1c1]">
{/* Content */}
<div className="flex-1">
<h1 className={`text-4xl font-bold ${righteous.className} mb-2`}>
Programming in C
</h1>
<p className={`text-2xl mt-[-8] ${righteous.className}`}>{chapter.title}</p>

{/* Navigation Buttons */}
{/* Top Pagination Control Interface */}
<div className="flex justify-between mt-3">
{prevChapter ? (
<Link
Expand Down Expand Up @@ -82,7 +83,7 @@ export default function ChapterPage({ params }: ChapterProps) {
<ChapterComponent />
</div>

{/* Navigation Buttons */}
{/* Bottom Pagination Control Interface */}
<div className="flex justify-between my-8">
{prevChapter ? (
<Link
Expand Down Expand Up @@ -110,4 +111,4 @@ export default function ChapterPage({ params }: ChapterProps) {
</div>
</div>
);
}
}
86 changes: 36 additions & 50 deletions app/sem1/c/content/chapter1.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
"use client";

import Image from "next/image";
import { CodeBlock } from "../../../components/CodeBlock";

export const Ch1Content = () => {
return (
Expand All @@ -22,7 +25,7 @@ export const Ch1Content = () => {
<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="p-4 my-4 rounded-lg bg-[#f0ddb6]">
<div className="font-semibold text-[#3a2a14]">Quick Example</div>
<div className="mt-2 text-[#2b1d0f]">
Input: [72, 89, 34, 91] <br />
Expand All @@ -47,19 +50,17 @@ export const Ch1Content = () => {
<Image
src="/timeline-computing.png"
alt="timeline-computing"
className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
className="my-6 max-w-full"
width={1000}
height={350}
/>

</section>

<hr className="my-6 border-[#c7a669] opacity-40" />

{/* Early Computers */}
<section>
<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>
Expand All @@ -69,19 +70,17 @@ export const Ch1Content = () => {
<Image
src="/eniac-block.png"
alt="eniac-block"
className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
className="my-6 max-w-full"
width={850}
height={380}
/>

</section>

<hr className="my-6 border-[#c7a669] opacity-40" />

{/* Components */}
<section>
<h3 className="section-heading">Components of a Computer</h3>

<ul className="section-list">
<li>Input devices such as keyboard and mouse.</li>
<li>Output devices such as monitors and printers.</li>
Expand All @@ -94,26 +93,24 @@ export const Ch1Content = () => {
<Image
src="/computer-block-diagram.png"
alt="computer-block-diagram"
className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
className="my-6 max-w-full"
width={900}
height={400}
/>

</section>

<hr className="my-6 border-[#c7a669] opacity-40" />

{/* Problems */}
<section>
<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>Ill-defined problem: unclear goals or conditions.</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]">
<div className="p-3 my-3 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.
</div>
</section>
Expand All @@ -128,31 +125,28 @@ export const Ch1Content = () => {
<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
<CodeBlock
title="PSEUDO-CODE EXAMPLE: SUM OF FIRST N NUMBERS"
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="p-4 my-4 bg-[#f3e7c2]">
<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
</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}
/>

src="/flowchart-sum-n.png"
alt="flowchart-sum-n"
className="my-6 max-w-full"
width={750}
height={500}
/>
</div>
</section>

Expand All @@ -161,63 +155,56 @@ PRINT sum`}
{/* Memory */}
<section>
<h3 className="section-heading">Memory, Variables and Values</h3>

<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>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
<CodeBlock
title="MEMORY LAYOUT EXAMPLE"
code={`Address Content
0x1000 0x05 (integer 5)
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}
/>
/>

</div>
<Image
src="/memory-layout.png"
alt="memory-layout"
className="my-6 max-w-full"
width={800}
height={500}
/>
</section>

<hr className="my-6 border-[#c7a669] opacity-40" />

{/* Instructions */}
<section>
<h3 className="section-heading">Instructions</h3>

<ul className="section-list">
<li>Machine instructions are binary codes executed by the CPU.</li>
<li>Assembly uses mnemonic symbols.</li>
<li>High-level languages require compiling or interpreting.</li>
<li>Instruction cycle: Fetch, Decode, Execute, Store.</li>
</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
<CodeBlock
title="ASSEMBLY-LIKE EXAMPLE"
code={`LOAD R1, 5
LOAD R2, 10
ADD R3, R1, R2
STORE R3, 0x200`}
</pre>
</div>
/>
</section>

<hr className="my-6 border-[#c7a669] opacity-40" />

{/* Programs */}
<section>
<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>
Expand All @@ -227,13 +214,12 @@ STORE R3, 0x200`}
<Image
src="/program-lifecycle.png"
alt="program-lifecycle"
className="my-6 rounded-lg border border-[#c7a669] shadow-md max-w-full"
className="my-6 max-w-full"
width={980}
height={430}
/>

</section>

</div>
);
};
};
Loading