interactives/src/pages/Themes.tsx
Neeldhara Misra 3f04e8c7d7 Refactor site structure and add comprehensive interactive index
- Move Puzzles and Miscellany under Themes
- Add Contest Problems as new theme
- Create About page with comprehensive site information
- Create InteractiveIndex component with advanced filtering and sorting
- Update navigation to include Index, Themes, and About
- Add pagination (10 items per page) with search and tag filtering
- Update routing structure for new theme organization
- Remove standalone Puzzles and Miscellany pages
- Add new theme pages: /themes/puzzles, /themes/miscellany, /themes/contest-problems
- Update homepage to point to new interactive index
- Maintain consistent layout and styling across all new pages
2025-07-20 10:07:04 +05:30

99 lines
No EOL
3.2 KiB
TypeScript

import {
GraduationCap,
Binary,
Users,
Cpu,
Database,
Gamepad2,
CreditCard,
Calculator,
Puzzle,
Sparkles,
Trophy
} from "lucide-react";
import Layout from "@/components/Layout";
import ThemeCard from "@/components/ThemeCard";
const Themes = () => {
const themes = [
{
title: "Discrete Math",
description: "Explore fundamental concepts in discrete mathematics through visual and interactive demonstrations.",
path: "/themes/discrete-math",
icon: <Binary className="w-6 h-6" />
},
{
title: "Social Choice",
description: "Understand voting systems, fairness criteria, and collective decision-making through interactive simulations.",
path: "/themes/social-choice",
icon: <Users className="w-6 h-6" />
},
{
title: "Advanced Algorithms",
description: "Deep dive into complex algorithmic concepts with step-by-step visualizations and performance analysis.",
path: "/themes/advanced-algorithms",
icon: <Cpu className="w-6 h-6" />
},
{
title: "Data Structures",
description: "Master fundamental and advanced data structures through interactive manipulation and visualization.",
path: "/themes/data-structures",
icon: <Database className="w-6 h-6" />
},
{
title: "Games",
description: "Learn through play with educational games that reinforce computer science and mathematical concepts.",
path: "/themes/games",
icon: <Gamepad2 className="w-6 h-6" />
},
{
title: "Cards and Math",
description: "Discover mathematical principles and probability theory through card games and interactive demonstrations.",
path: "/themes/cards-math",
icon: <CreditCard className="w-6 h-6" />
},
{
title: "Puzzles",
description: "Get ready for an engaging collection of educational puzzles designed to challenge your problem-solving skills and reinforce key concepts across multiple disciplines.",
path: "/themes/puzzles",
icon: <Puzzle className="w-6 h-6" />
},
{
title: "Miscellany",
description: "Discover unique educational experiments, creative tools, and innovative interactive content that doesn't fit into traditional categories but sparks curiosity and enhances learning.",
path: "/themes/miscellany",
icon: <Sparkles className="w-6 h-6" />
},
{
title: "Contest Problems",
description: "Practice with problems from programming competitions, mathematical olympiads, and algorithmic challenges with interactive solutions and explanations.",
path: "/themes/contest-problems",
icon: <Trophy className="w-6 h-6" />
}
];
return (
<Layout>
<div className="py-12 px-4">
<div className="max-w-6xl mx-auto">
<div className="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
{themes.map((theme) => (
<ThemeCard
key={theme.title}
title={theme.title}
description={theme.description}
path={theme.path}
icon={theme.icon}
/>
))}
</div>
</div>
</div>
</Layout>
);
};
export default Themes;