Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add Ternary Search Magic Trick interactive and fix layout issues

Browse source 
- Create new Ternary Search Magic Trick interactive with ternary search logic
- Add emoji buttons and 'not present' option for better UX
- Implement 'How it Works' modal with embedded YouTube video
- Fix layout margins when accessing interactives from theme pages
- Add standalone and green screen pages for the new interactive
- Update Data Structures theme to include the new interactive
This commit is contained in:
Neeldhara Misra 2025-07-20 10:29:09 +05:30
parent 3f04e8c7d7
commit 7451682dd5
7 changed files with 419 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

61
src/components/InteractiveGallery.tsx
View file

@ -3,38 +3,60 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { Search } from 'lucide-react';
import Layout from '@/components/Layout';
import BinarySearchTrick from '@/components/BinarySearchTrick';
import TernarySearchTrick from '@/components/TernarySearchTrick';
interface Interactive {
id: string;
title: string;
description: string;
tags: string[];
component: React.ComponentType;
component: React.ComponentType<{ showSocialShare?: boolean }>;
}
const interactives: Interactive[] = [{
id: 'binary-search-trick',
title: 'Binary Search Magic Trick',
description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
component: BinarySearchTrick
}];
const interactives: Interactive[] = [
{
id: 'binary-search-trick',
title: 'Binary Search Magic Trick',
description: 'Perform an amazing magic trick that reveals how binary numbers work. Think of a number and watch the magic happen!',
tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
component: BinarySearchTrick
},
{
id: 'ternary-search-trick',
title: 'Ternary Search Magic Trick',
description: 'Experience the magic of ternary search! Think of a number and watch as the cards reveal it through mathematical calculations.',
tags: ['ternary', 'magic', 'numbers', 'trick', 'data-structures', 'search'],
component: TernarySearchTrick
}
];
const InteractiveGallery = () => {
const [searchTerm, setSearchTerm] = useState('');
const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null);
const filteredInteractives = interactives.filter(interactive => interactive.title.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.description.toLowerCase().includes(searchTerm.toLowerCase()) || interactive.tags.some(tag => tag.toLowerCase().includes(searchTerm.toLowerCase())));
if (selectedInteractive) {
const InteractiveComponent = selectedInteractive.component;
return <div className="space-y-6">
<div className="flex items-center gap-4">
<button onClick={() => setSelectedInteractive(null)} className="text-primary hover:text-primary/80 font-medium">← Back to Data Structures and Algorithms</button>
return (
<div className="min-h-screen bg-background">
<div className="container mx-auto px-4 py-8 space-y-6">
<div className="flex items-center gap-4">
<button
onClick={() => setSelectedInteractive(null)}
className="text-primary hover:text-primary/80 font-medium"
>
← Back to Data Structures and Algorithms
</button>
</div>
<InteractiveComponent showSocialShare={true} />
</div>
<div className="bg-background border rounded-lg p-6">
<InteractiveComponent />
</div>
</div>;
</div>
);
}
return <div className="space-y-6">
return (
<Layout>
<div className="max-w-7xl mx-auto p-6">
<div className="space-y-6">
<div className="space-y-4">
<h1 className="text-3xl font-bold text-foreground">Data Structures and Algorithms</h1>
<p className="text-muted-foreground text-lg">Interactive explorations of elementary data structures and algorithms.</p>
@ -68,6 +90,9 @@ const InteractiveGallery = () => {
{filteredInteractives.length === 0 && <div className="text-center py-12">
<p className="text-muted-foreground text-lg">No interactives found matching your search.</p>
</div>}
</div>;
</div>
</div>
</Layout>
);
};
export default InteractiveGallery;