d7232f8470
- Center cards in one-by-one mode. - Remove global header/footer from interactive pages. - Fix "School Connect" text on data structures page. - Remove binary representation interactive from data structures list.
76 lines
No EOL
3.6 KiB
TypeScript
76 lines
No EOL
3.6 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 BinarySearchTrick from '@/components/BinarySearchTrick';
|
|
interface Interactive {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
tags: string[];
|
|
component: React.ComponentType;
|
|
}
|
|
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 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</button>
|
|
|
|
</div>
|
|
<div className="bg-background border rounded-lg p-6">
|
|
<InteractiveComponent />
|
|
</div>
|
|
</div>;
|
|
}
|
|
return <div className="space-y-6">
|
|
<div className="space-y-4">
|
|
<h1 className="text-3xl font-bold text-foreground">Data Structures Interactives</h1>
|
|
<p className="text-muted-foreground text-lg">
|
|
Interactive tools and resources designed to connect theoretical concepts with practical applications in educational settings.
|
|
</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>;
|
|
};
|
|
export default InteractiveGallery; |