/* Garbashala — Library / All Steps */ const DIFFICULTY_OPTIONS = ["any", "★", "★★", "★★★", "★★★★"]; const TYPE_OPTIONS = ["any", "be taali", "tran taali", "song", "dandiya"]; const SORT_OPTIONS = ["beginner first", "alphabetical", "newest"]; const Library = () => { const all = window.GARBA_STEPS; const [difficulty, setDifficulty] = React.useState("any"); const [type, setType] = React.useState("any"); const [sort, setSort] = React.useState("beginner first"); const visible = React.useMemo(() => { let list = all.map((s, i) => ({ ...s, _idx: i })); if (difficulty !== "any") { const lvl = difficulty.length; list = list.filter((s) => s.difficulty === lvl); } if (type !== "any") { list = list.filter((s) => Array.isArray(s.types) && s.types.includes(type)); } if (sort === "alphabetical") { list = [...list].sort((a, b) => a.name.localeCompare(b.name)); } else if (sort === "newest") { list = [...list].sort((a, b) => b._idx - a._idx); } else { list = [...list].sort((a, b) => a.difficulty - b.difficulty || a._idx - b._idx); } return list; }, [all, difficulty, type, sort]); const filtered = visible.length !== all.length; return (

{/* PAGE HEADER */}

the library ✦

every step we've documented.

{all.length} steps and counting. Filter by what you're feeling — slow & swaying, fast & spinny, modern disco-garba, or the ancient stuff your nani knows.

{/* FILTERS */}

{filtered ? `showing ${visible.length} of ${all.length} ↓` : `showing all ${all.length} ↓`}

{/* GRID */}

{visible.length === 0 ? (

no steps match these filters yet — try loosening one.

) : (

{visible.map((s, i) => ( ))}

)}

{/* BOTTOM CTA */}