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:04:53 +00:00
parent f8a51c9f21
commit 04ecfc8d28
1 changed files with 22 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/pages/theme-pages/discrete-math/Foundations.tsx
View file

@ -4,7 +4,6 @@ import { Search } from "lucide-react";
import Layout from "@/components/Layout"; import Layout from "@/components/Layout";
import InteractiveCard from "@/components/InteractiveCard"; import InteractiveCard from "@/components/InteractiveCard";
import BinaryNumberGame from "@/components/BinaryNumberGame"; import BinaryNumberGame from "@/components/BinaryNumberGame";
interface Interactive { interface Interactive {
id: string; id: string;
title: string; title: string;
@ -13,72 +12,41 @@ interface Interactive {
component: React.ComponentType; component: React.ComponentType;
greenScreenPath: string; greenScreenPath: string;
} }
const interactives: Interactive[] = [{
const interactives: Interactive[] = [ id: "binary-number-game",
{ title: "Binary Number Representation",
id: "binary-number-game", description: "Learn how numbers are represented in binary (base-2) format through an interactive guessing game.",
title: "Binary Number Representation", tags: ["binary", "numbers", "conversion", "representation"],
description: "Learn how numbers are represented in binary (base-2) format through an interactive guessing game.", component: BinaryNumberGame,
tags: ["binary", "numbers", "conversion", "representation"], greenScreenPath: "/binary-number-game"
component: BinaryNumberGame, }];
greenScreenPath: "/binary-number-game",
},
];
const Foundations = () => { const Foundations = () => {
const [searchTerm, setSearchTerm] = useState(""); const [searchTerm, setSearchTerm] = useState("");
const [selectedInteractive, setSelectedInteractive] = useState<Interactive | null>(null); 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) { if (selectedInteractive) {
const InteractiveComponent = selectedInteractive.component; const InteractiveComponent = selectedInteractive.component;
return ( return <div className="min-h-screen bg-background p-6">
<div className="min-h-screen bg-background p-6">
<div className="max-w-4xl mx-auto space-y-6"> <div className="max-w-4xl mx-auto space-y-6">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button <button onClick={() => setSelectedInteractive(null)} className="text-primary hover:text-primary/80 font-medium">
onClick={() => setSelectedInteractive(null)}
className="text-primary hover:text-primary/80 font-medium"
>
← Back to Foundations ← Back to Foundations
</button> </button>
<h1 className="text-2xl font-bold text-foreground">{selectedInteractive.title}</h1>
<Link <Link to="/themes/discrete-math" className="text-primary hover:text-primary/80 font-medium">
to="/themes/discrete-math"
className="text-primary hover:text-primary/80 font-medium"
>
Back to Discrete Math → Back to Discrete Math →
</Link> </Link>
</div> </div>
<BinaryNumberGame /> <BinaryNumberGame />
<button
onClick={() => setSelectedInteractive(null)}
className="inline-flex items-center px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 transition-colors"
>
← Back to Foundations Gallery
</button>
</div> </div>
</div> </div>;
);
} }
return <Layout>
return (
<Layout>
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
<div className="space-y-8"> <div className="space-y-8">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Link <Link to="/themes/discrete-math" className="text-primary hover:text-primary/80 font-medium">
to="/themes/discrete-math"
className="text-primary hover:text-primary/80 font-medium"
>
← Back to Discrete Math ← Back to Discrete Math
</Link> </Link>
<h1 className="text-3xl font-bold text-foreground">Foundations</h1> <h1 className="text-3xl font-bold text-foreground">Foundations</h1>
@ -86,38 +54,20 @@ const Foundations = () => {
<div className="relative max-w-md"> <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" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
<input <input type="text" placeholder="Search interactives..." value={searchTerm} onChange={e => setSearchTerm(e.target.value)} className="w-full pl-10 pr-4 py-2 border border-outline rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" />
type="text"
placeholder="Search interactives..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-outline rounded-md bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div> </div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{filteredInteractives.map((interactive) => ( {filteredInteractives.map(interactive => <InteractiveCard key={interactive.id} title={interactive.title} description={interactive.description} tags={interactive.tags} onClick={() => setSelectedInteractive(interactive)} />)}
<InteractiveCard
key={interactive.id}
title={interactive.title}
description={interactive.description}
tags={interactive.tags}
onClick={() => setSelectedInteractive(interactive)}
/>
))}
</div> </div>
{filteredInteractives.length === 0 && ( {filteredInteractives.length === 0 && <div className="text-center py-12">
<div className="text-center py-12">
<p className="text-muted-foreground"> <p className="text-muted-foreground">
No interactives found matching "{searchTerm}" No interactives found matching "{searchTerm}"
</p> </p>
</div> </div>}
)}
</div> </div>
</div> </div>
</Layout> </Layout>;
);
}; };
export default Foundations; export default Foundations;