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

Housekeeping: reorder themes, fix hover effects, update titles, add collapsible tags, move Zeckendorf Search Magic Trick to Data Structures

Browse source
This commit is contained in:
Neeldhara Misra 2025-07-23 05:05:52 +05:30
parent e37f3ed884
commit df2b2d6b9e
5 changed files with 31 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/InteractiveIndex.tsx
View file

@ -61,7 +61,7 @@ const allInteractives: Interactive[] = [
description: 'Experience the magic of Zeckendorf representation! Think of a number and watch as the cards reveal it through Fibonacci numbers.',
tags: ['fibonacci', 'magic', 'numbers', 'trick', 'zeckendorf', 'representation'],
path: '/discrete-math/foundations/zeckendorf-search',
theme: 'Discrete Math',
theme: 'Data Structures and Algorithms',
dateAdded: '2024-12-22'
},
{
@ -166,6 +166,7 @@ const InteractiveIndex = () => {
const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
const [currentPage, setCurrentPage] = useState(1);
const itemsPerPage = 10;
const [showTags, setShowTags] = useState(false);
// Get all unique tags
const allTags = useMemo(() => {
@ -292,19 +293,26 @@ const InteractiveIndex = () => {
{/* Tags */}
<div className="mb-8">
<h3 className="text-lg font-semibold text-foreground mb-3">Filter by Tags</h3>
<div className="flex flex-wrap gap-2">
{allTags.map(tag => (
<Badge
key={tag}
variant={selectedTag === tag ? "default" : "outline"}
className="cursor-pointer hover:bg-primary hover:text-primary-foreground"
onClick={() => handleTagClick(tag)}
>
{tag}
</Badge>
))}
<div className="flex items-center mb-3">
<h3 className="text-lg font-semibold text-foreground mr-3">Filter by Tags</h3>
<Button variant="ghost" size="sm" onClick={() => setShowTags(v => !v)}>
{showTags ? 'Hide Tags' : 'Show all Tags'}
</Button>
</div>
{showTags && (
<div className="flex flex-wrap gap-2">
{allTags.map(tag => (
<Badge
key={tag}
variant={selectedTag === tag ? "default" : "outline"}
className="cursor-pointer hover:bg-primary hover:text-primary-foreground"
onClick={() => handleTagClick(tag)}
>
{tag}
</Badge>
))}
</div>
)}
</div>
{/* Results Count */}