+
+
+ );
+ }
+
+ if (error) {
+ return (
+ Loading learning map...
+
+
+ );
+ }
+
+ if (!learningMap) {
+ return (
+ Error
+{error}
+ +
+
+
+ );
+ }
+
+
+ return (
+ Loading learning map...
+
+
+ );
+ }
+
+ // Show list of all learning maps
+ const allMaps = getAllLearningMaps();
+
+ return (
+
+
+
+ 
+
+ Learningmap
+
+
+
+
+
+ );
+}
+
+export default Learn;
diff --git a/platforms/web/src/learnerStore.ts b/platforms/web/src/learnerStore.ts
new file mode 100644
index 0000000..a4d37fa
--- /dev/null
+++ b/platforms/web/src/learnerStore.ts
@@ -0,0 +1,77 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { RoadmapData, RoadmapState } from '@learningmap/learningmap';
+
+interface LearningMapEntry {
+ id: string;
+ roadmapData: RoadmapData;
+ state?: RoadmapState;
+ lastAccessed: number;
+}
+
+interface LearnerStore {
+ learningMaps: Record
+
+
+
+
+
+ Learningmap
+
+
+
+
+
+ {allMaps.length === 0 ? (
+ Add a New Learning Map
+
+ setNewMapUrl(e.target.value)}
+ onKeyPress={(e) => {
+ if (e.key === 'Enter') {
+ handleAddMap();
+ }
+ }}
+ />
+
+
+ {error && {error}
} +
+
+ ) : (
+ You haven't added any learning maps yet.
+Paste a learning map URL above to get started!
+
+ {allMaps.map((map) => {
+ const completed = Object.values(map.state?.nodes || {}).filter(
+ (node) => node.state === 'completed' || node.state === 'mastered'
+ ).length;
+ const total = map.roadmapData.nodes.filter(
+ (node) => node.type === 'task' || node.type === 'topic'
+ ).length;
+ const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
+
+ return (
+
+ )}
+
+
+ );
+ })}
+
+
+ {map.roadmapData.settings?.title || 'Untitled Map'}
+ +
+
+
+
+
+
+
+
+ {completed} / {total} completed ({progress}%)
+
+
+
+ Last accessed:{' '}
+ {new Date(map.lastAccessed).toLocaleDateString()}
+
+
+
+
+
+