Add binary search interactive
Recreate the binary search interactive, add a popup explanation, social sharing, and green screen versions. Place it under Data Structures.
This commit is contained in:
parent
ee4f62434e
commit
dda00627f8
6 changed files with 278 additions and 5 deletions
18
src/pages/BinarySearchTrickGreenScreen.tsx
Normal file
18
src/pages/BinarySearchTrickGreenScreen.tsx
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { useParams } from 'react-router-dom';
|
||||
import BinarySearchTrick from '@/components/BinarySearchTrick';
|
||||
import GreenScreenWrapper from '@/components/GreenScreenWrapper';
|
||||
|
||||
const BinarySearchTrickGreenScreen = () => {
|
||||
const { mode } = useParams<{ mode: 'gs-lite' | 'gs-dark' }>();
|
||||
const greenScreenMode = mode === 'gs-dark' ? 'dark' : 'lite';
|
||||
|
||||
return (
|
||||
<GreenScreenWrapper mode={greenScreenMode}>
|
||||
<div className="space-y-6">
|
||||
<BinarySearchTrick showSocialShare={false} />
|
||||
</div>
|
||||
</GreenScreenWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default BinarySearchTrickGreenScreen;
|
||||
13
src/pages/BinarySearchTrickPage.tsx
Normal file
13
src/pages/BinarySearchTrickPage.tsx
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
import BinarySearchTrick from '@/components/BinarySearchTrick';
|
||||
|
||||
const BinarySearchTrickPage = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-background p-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<BinarySearchTrick />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default BinarySearchTrickPage;
|
||||
|
|
@ -1,11 +1,23 @@
|
|||
import ComingSoon from "@/components/ComingSoon";
|
||||
import Layout from "@/components/Layout";
|
||||
import InteractiveGallery from "@/components/InteractiveGallery";
|
||||
|
||||
const DataStructures = () => {
|
||||
return (
|
||||
<ComingSoon
|
||||
title="Data Structures"
|
||||
description="Master fundamental and advanced data structures through interactive manipulation and visualization. Explore trees, graphs, heaps, hash tables, and their real-world applications."
|
||||
/>
|
||||
<Layout>
|
||||
<div className="space-y-8">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl font-bold mb-4 bg-gradient-to-r from-primary to-primary/70 bg-clip-text text-transparent">
|
||||
Data Structures
|
||||
</h1>
|
||||
<p className="text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
Master fundamental and advanced data structures through interactive manipulation and visualization.
|
||||
Explore trees, graphs, heaps, hash tables, and their real-world applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<InteractiveGallery />
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue