training.tsx still a bit messy, all that is left is to retrieve data from firestore /training and /walkthrough and render it

src/components/TrainingContent/TrainingInterfaces.ts

@@ -0,0 +1,50 @@
+export interface ITrainingContent {
+    created_at: number;
+    exams: {
+        id: string;
+        date: number;
+        detailed_summary: string;
+        performance_comment: string;
+        score: string;
+        stat_ids: string[]
+    }[];
+    tip_ids: string[];
+    weak_areas: {
+        area: string;
+        comment: string;
+    }[];
+}
+
+export interface ITrainingTip {
+    id: string;
+    tipCategory: string;
+    tipHtml: string;
+    standalone: boolean;
+    exercise: {
+        question: string;
+        highlightable: string;
+        segments: WalkthroughConfigs[]
+    }
+}
+
+export interface WalkthroughConfigs {
+    html: string;
+    wordDelay: number;
+    holdDelay: number;
+    highlight: string[];
+}
+
+
+export interface TimelineEvent {
+    type: 'text' | 'highlight';
+    start: number;
+    end: number;
+    segmentIndex: number;
+    content?: string[];
+}
+
+export interface SegmentRef extends WalkthroughConfigs {
+    words: string[];
+    startTime: number;
+    endTime: number;
+}