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

Visual edit in Lovable

Browse source 
Edited UI in Lovable
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 14:52:39 +00:00
parent dda00627f8
commit 27f179e517
2 changed files with 31 additions and 78 deletions
Download patch file Download diff file Expand all files Collapse all files

76
src/components/InteractiveGallery.tsx
View file

@ -5,7 +5,6 @@ import { Badge } from '@/components/ui/badge';
import { Search } from 'lucide-react';
import BinaryNumberGame from '@/components/BinaryNumberGame';
import BinarySearchTrick from '@/components/BinarySearchTrick';
interface Interactive {
id: string;
title: string;
@ -13,56 +12,36 @@ interface Interactive {
tags: string[];
component: React.ComponentType;
}
const interactives: Interactive[] = [
{
const interactives: Interactive[] = [{
id: 'binary-number-game',
title: 'Binary Number Representation',
description: 'Learn binary representation by expressing numbers as sums of powers of two. Toggle cards to match the target sum!',
tags: ['binary', 'math', 'numbers', 'representation', 'powers-of-two'],
component: BinaryNumberGame,
},
{
component: BinaryNumberGame
}, {
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,
},
];
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()))
);
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">
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 Gallery
</button>
<h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
<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>
);
</div>;
}
return (
<div className="space-y-6">
return <div className="space-y-6">
<div className="space-y-4">
<h1 className="text-3xl font-bold text-foreground">School Connect Interactives</h1>
<p className="text-muted-foreground text-lg">
@ -73,22 +52,12 @@ const InteractiveGallery = () => {
{/* 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"
/>
<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)}
>
{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">
@ -97,24 +66,17 @@ const InteractiveGallery = () => {
</CardHeader>
<CardContent>
<div className="flex flex-wrap gap-2">
{interactive.tags.map((tag) => (
<Badge key={tag} variant="secondary" className="text-xs">
{interactive.tags.map(tag => <Badge key={tag} variant="secondary" className="text-xs">
{tag}
</Badge>
))}
</Badge>)}
</div>
</CardContent>
</Card>
))}
</Card>)}
</div>
{filteredInteractives.length === 0 && (
<div className="text-center py-12">
{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>;
};
export default InteractiveGallery;

17
src/pages/theme-pages/DataStructures.tsx
View file

@ -1,24 +1,15 @@
import Layout from "@/components/Layout";
import InteractiveGallery from "@/components/InteractiveGallery";
const DataStructures = () => {
return (
<Layout>
return <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>
);
</Layout>;
};
export default DataStructures;