Skip to content

style : added styling to the insertion sort and merge sort #21

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 1 commit into from
Aug 9, 2025
Merged

style : added styling to the insertion sort and merge sort #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 10 additions & 0 deletions app/visualizer/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,16 @@ export const metadata = {
'DSA with Code'
],
robots: 'index, follow',
openGraph: {
images: [
{
url: "/og/visualizer.png",
width: 1200,
height: 630,
alt: "Algorithm Visualization",
},
],
},
};

const sections = [
Expand Down
2 changes: 1 addition & 1 deletion app/visualizer/searching/binarysearch/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const metadata = {
openGraph: {
images: [
{
url: "/og/binarySearch.png",
url: "/og/searching/binarySearch.png",
width: 1200,
height: 630,
alt: "Binary Search Algorithm Visualization",
Expand Down
2 changes: 1 addition & 1 deletion app/visualizer/searching/linearsearch/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const metadata = {
openGraph: {
images: [
{
url: "/og/linearSearch.png",
url: "/og/searching/linearSearch.png",
width: 1200,
height: 630,
alt: "Linear Search Algorithm Visualization",
Expand Down
2 changes: 1 addition & 1 deletion app/visualizer/sorting/insertionsort/animation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ const InsertionSortVisualizer = () => {
</div>

{/* 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">Array Visualization</h2>
{array.length > 0 ? (
<div className="flex flex-wrap gap-4 justify-center">
Expand Down
4 changes: 2 additions & 2 deletions app/visualizer/sorting/insertionsort/codeBlock.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,10 +226,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
2 changes: 1 addition & 1 deletion app/visualizer/sorting/insertionsort/page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,4 +124,4 @@ export default function Page() {
<Footer />
</>
);
}
}
6 changes: 3 additions & 3 deletions app/visualizer/sorting/insertionsort/quiz.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -181,22 +181,22 @@ const InsertionSortQuiz = () => {
};

return (
<section className="max-w-4xl 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">
Insertion 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
71 changes: 1 addition & 70 deletions app/visualizer/sorting/mergesort/animation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,8 @@
"use client";
import React, { useState, useRef, useEffect } from "react";
import { gsap } from "gsap";
import Footer from "@/app/components/footer";
import Content from "@/app/visualizer/sorting/mergesort/content";
import ArrayGenerator from "@/app/components/ui/randomArray";
import CustomArrayInput from "@/app/components/ui/customArrayInput";
import ExploreOther from "@/app/components/ui/exploreOther";
import CodeBlock from "@/app/visualizer/sorting/mergesort/codeBlock";
import Quiz from "@/app/visualizer/sorting/mergesort/quiz";
import GoBackButton from "@/app/components/ui/goback";
import BackToTop from "@/app/components/ui/backtotop";

const MergeSortVisualizer = () => {
const [array, setArray] = useState([]);
Expand Down Expand Up @@ -228,20 +221,7 @@ const MergeSortVisualizer = () => {


return (
<div className="min-h-screen max-h-auto bg-gray-100 dark:bg-zinc-950 text-gray-800 dark:text-gray-200">
<main className="container mx-auto px-6 pt-16 pb-4">

{ /* go back block here */}
<div className="mt-10 sm:mt-10">
<GoBackButton />
</div>

{ /* main logic here */}
<h1 className="text-4xl md:text-4xl mt-6 ml-10 font-bold text-left text-gray-900 dark:text-white mb-0">
<span className="text-black dark:text-white">Merge Sort</span>
</h1>
<div className='bg-black border border-none dark:bg-gray-600 w-100 h-[2px] rounded-xl mt-2 mb-5'></div>
<Content />
<main className="container mx-auto px-6 pt-2 pb-6">
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mb-8">
Visualize the divide-and-conquer approach of Merge Sort with recursive
splitting and merging.
Expand Down Expand Up @@ -364,57 +344,8 @@ const MergeSortVisualizer = () => {
</div>
)}
</div>

{/* Enhanced Recursion Tree */}

{/* Algorithm Explanation with Visual Guide */}
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 mt-8">
<h2 className="text-xl font-semibold mb-4">Merge Sort Process</h2>
<div>
<div>
<h3 className="font-medium mb-2">Steps:</h3>
<ol className="list-decimal pl-5 space-y-2">
<li>
Divide array into halves recursively until single elements
</li>
<li>Merge adjacent subarrays in sorted order</li>
<li>Continue merging until whole array is sorted</li>
</ol>
</div>
</div>
</div>
</div>

{ /* quiz block here */}
<p className="text-lg text-center text-gray-600 dark:text-gray-400 mt-8 mb-8">
Test Your Knowledge before moving forward!
</p>
<Quiz />

<CodeBlock />
<ExploreOther
title="Explore Sorting Algorithms"
links={[
{
text: "Selection Sort",
url: "/visualizer/sorting/selectionsort",
},
{ text: "Bubble Sort", url: "/visualizer/sorting/bubblesort" },
{
text: "Insertion Sort",
url: "/visualizer/sorting/insertionsort",
},
{ text: "Quick Sort", url: "/visualizer/sorting/quicksort" },
{ text: "Heap Sort", url: "/algorithms/sorting/heap" },
]}
/>
</main>
<div>
<div className="bg-gray-700 z-10 h-[1px]"></div>
</div>
<BackToTop/>
<Footer />
</div>
);
};

Expand Down
Loading
Loading