Visual edit in Lovable

Edited UI in Lovable

src/components/InteractiveGallery.tsx

@@ -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',
-    id: 'binary-number-game',
+  description: 'Learn binary representation by expressing numbers as sums of powers of two. Toggle cards to match the target sum!',
-    title: 'Binary Number Representation',
+  tags: ['binary', 'math', 'numbers', 'representation', 'powers-of-two'],
-    description: 'Learn binary representation by expressing numbers as sums of powers of two. Toggle cards to match the target sum!',
+  component: BinaryNumberGame
-    tags: ['binary', 'math', 'numbers', 'representation', 'powers-of-two'],
+}, {
-    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!',
-    id: 'binary-search-trick',
+  tags: ['binary', 'magic', 'numbers', 'trick', 'data-structures'],
-    title: 'Binary Search Magic Trick',
+  component: BinarySearchTrick
-    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())));
-  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 (
+    return <div className="space-y-6">
-      <div className="space-y-6">
         <div className="flex items-center gap-4">
-          <button 
+          <button onClick={() => setSelectedInteractive(null)} className="text-primary hover:text-primary/80 font-medium">← Back to Data Structures</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>
+      </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
+        <Input placeholder="Search interactives..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="pl-10" />
-          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) => (
+        {filteredInteractives.map(interactive => <Card key={interactive.id} className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:scale-105" onClick={() => setSelectedInteractive(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) => (
+                {interactive.tags.map(tag => <Badge key={tag} variant="secondary" className="text-xs">
-                  <Badge key={tag} variant="secondary" className="text-xs">
                     {tag}
-                  </Badge>
+                  </Badge>)}
-                ))}
               </div>
             </CardContent>
-          </Card>
+          </Card>)}
-        ))}
       </div>
 
-      {filteredInteractives.length === 0 && (
+      {filteredInteractives.length === 0 && <div className="text-center py-12">
-        <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;

src/pages/theme-pages/DataStructures.tsx

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