Skip to content

Feat : added new layouts and dsa challenge to whole sorting section #22

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

Merged
Sohan-Rout merged 2 commits into from
Aug 9, 2025
Merged

Feat : added new layouts and dsa challenge to whole sorting section #22

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
a04912c
style : completed styling of merge sort
Sohan-Rout Aug 9, 2025
aaa38d3
fix : added new layout to quick sort
Sohan-Rout Aug 9, 2025
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
12 changes: 6 additions & 6 deletions app/visualizer/sorting/mergesort/animation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,7 +229,7 @@ const MergeSortVisualizer = () => {

<div className="max-w-4xl mx-auto">
{/* Controls */}
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md mb-8 border border-gray-200 dark:border-gray-700">
<div className="bg-white dark:bg-neutral-950 p-4 sm:p-6 rounded-lg shadow-md mb-6 md:mb-8 border border-gray-200 dark:border-gray-700">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<ArrayGenerator
Expand All @@ -254,13 +254,13 @@ const MergeSortVisualizer = () => {
<button
onClick={mergeSort}
disabled={!array.length || sorting || sorted}
className="w-full bg-none border border-black dark:border-white text-black dark:text-white px-4 py-2 rounded disabled:opacity-50 disabled:text-blue-500 disabled:border-blue-500 disabled:dark:border-blue-500 disabled:dark:text-blue-500"
className="w-full disabled:opacity-75 bg-none bg-green-500 px-4 py-2 rounded shadow-sm transition-all duration-300 text-sm sm:text-base text-black"
>
{sorting ? "Sorting..." : "Start Merge Sort"}
</button>
<button
onClick={reset}
className="w-full bg-none border border-black dark:border-white text-balck dark:text-white px-4 py-2 rounded"
className="w-full bg-none text-white bg-red-500 px-4 py-2 rounded transition-colors text-sm sm:text-base"
>
Reset All
</button>
Expand All @@ -285,19 +285,19 @@ const MergeSortVisualizer = () => {

{/* Stats */}
<div className="grid grid-cols-2 gap-4 text-sm">
<div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
<div className="font-medium">Comparisons:</div>
<div className="text-2xl">{comparisons}</div>
</div>
<div className="bg-gray-100 dark:bg-gray-700 p-3 rounded">
<div className="bg-gray-100 dark:bg-neutral-900 p-3 rounded">
<div className="font-medium">Merges:</div>
<div className="text-2xl">{swaps}</div>
</div>
</div>
</div>

{/* Main Array Visualization */}
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<div className="bg-white dark:bg-neutral-950 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700">
<h2 className="text-xl font-semibold mb-4">Main Array</h2>
{array.length > 0 ? (
<div className="flex flex-wrap gap-4 justify-center">
Expand Down
4 changes: 2 additions & 2 deletions app/visualizer/sorting/mergesort/codeBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,10 +312,10 @@ int main() {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3 }}
className="bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
className="bg-white dark:bg-neutral-950 rounded-xl shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-colors duration-300"
>
{/* Header */}
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700">
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 bg-gray-50 dark:bg-neutral-950 border-b border-gray-200 dark:border-gray-700">
<div className="flex items-center mb-2 sm:mb-0">
<FaCode className="text-blue-500 mr-2 text-lg" />
<h3 className="text-lg font-semibold text-gray-800 dark:text-white">
Expand Down
6 changes: 3 additions & 3 deletions app/visualizer/sorting/mergesort/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,9 +157,9 @@ const content = () => {
</p>
<div className="mt-8">
<ComplexityGraph
bestCase={(n) => n * Math.log(n)}
averageCase={(n) => n * Math.log(n)}
worstCase={(n) => n * Math.log(n)}
bestCase={(n) => n * Math.log2(n)}
averageCase={(n) => n * Math.log2(n)}
worstCase={(n) => n * Math.log2(n)}
maxN={25}
/>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/visualizer/sorting/mergesort/quiz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,22 +180,22 @@ const MergeSortQuiz = () => {
};

return (
<section className="max-w-2xl mx-auto shadow-lg rounded-xl bg-white dark:bg-gray-800 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
<section className="max-w-4xl mx-auto shadow-lg rounded-xl bg-white dark:bg-neutral-950 mt-8 mb-8 p-6 border border-gray-200 dark:border-gray-700">
{showIntro ? (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="text-center"
>
<div className="flex justify-center mb-6">
<div className="bg-blue-100 dark:bg-blue-900/30 p-4 rounded-full">
<div className="bg-blue-100 dark:bg-neutral-900 p-4 rounded-full">
<FaAward className="text-4xl text-blue-500 dark:text-blue-500" />
</div>
</div>
<h2 className="text-2xl font-bold mb-4 text-black dark:text-gray-100">
Merge Sort Quiz Challenge
</h2>
<div className="bg-white dark:bg-gray-700 p-4 rounded-lg mb-6 text-left shadow-inner">
<div className="bg-white dark:bg-neutral-900 p-4 rounded-lg mb-6 text-left shadow-inner">
<h3 className="font-bold mb-2 flex items-center text-blue-600 dark:text-blue-400">
<FaInfoCircle className="mr-2" /> How it works:
</h3>
Expand Down
Loading
Loading