106 lines
4.7 KiB
TypeScript
106 lines
4.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
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';
|
|
import GuessingGame from '@/components/GuessingGame';
|
|
|
|
interface Interactive {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
tags: string[];
|
|
component: React.ComponentType<{ showSocialShare?: boolean }>;
|
|
}
|
|
|
|
const interactives: Interactive[] = [
|
|
{
|
|
id: 'guessing-game',
|
|
title: 'Number Guessing Game',
|
|
description: 'Experience different search algorithms through interactive gameplay. Compare random, linear, and binary search strategies!',
|
|
tags: ['algorithms', 'search', 'educational', 'interactive', 'binary-search', 'computer-science'],
|
|
component: GuessingGame
|
|
},
|
|
{
|
|
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="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>
|
|
);
|
|
}
|
|
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>
|
|
</div>
|
|
|
|
{/* Search bar */}
|
|
<div className="relative max-w-md">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
|
<Input placeholder="Search interactives..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
|
|
</div>
|
|
|
|
{/* Gallery */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{filteredInteractives.map(interactive => <Card key={interactive.id} className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105" onClick={() => setSelectedInteractive(interactive)}>
|
|
<CardHeader className="space-y-3">
|
|
<CardTitle className="text-xl text-foreground">{interactive.title}</CardTitle>
|
|
<CardDescription className="text-muted-foreground line-clamp-3">
|
|
{interactive.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex flex-wrap gap-2">
|
|
{interactive.tags.map(tag => <Badge key={tag} variant="secondary" className="text-xs">
|
|
{tag}
|
|
</Badge>)}
|
|
</div>
|
|
</CardContent>
|
|
</Card>)}
|
|
</div>
|
|
|
|
{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>
|
|
</Layout>
|
|
);
|
|
};
|
|
export default InteractiveGallery;
|