Add binary interactive to School Connect

Implement a binary representation interactive game with cards, a timer, and score tracking on the School Connect page.

src/components/InteractiveGallery.tsx

@@ -0,0 +1,112 @@
+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 BinaryNumberGame from '@/components/BinaryNumberGame';
+
+interface Interactive {
+  id: string;
+  title: string;
+  description: string;
+  tags: string[];
+  component: React.ComponentType;
+}
+
+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,
+  },
+];
+
+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 Gallery
+          </button>
+          <h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
+        </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">School Connect 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;