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

src/stores/recordStore.ts

@@ -3,16 +3,20 @@ import {create} from "zustand";
 
 export interface RecordState {
 	selectedUser?: string;
+	training: boolean;
 	setSelectedUser: (selectedUser: string | undefined) => void;
+	setTraining: (training: boolean) => void;
 }
 
 export const initialState = {
 	selectedUser: undefined,
+	training: false
 };
 
 const recordStore = create<RecordState>((set) => ({
 	...initialState,
     setSelectedUser: (selectedUser: string | undefined) => set(() => ({selectedUser})),
+	setTraining: (training: boolean) => set(() => ({training})),
 }));
 
 export default recordStore;

src/stores/trainingContentStore.ts

@@ -0,0 +1,18 @@
+import { Stat } from "@/interfaces/user";
+import {create} from "zustand";
+
+export interface TrainingContentState {
+	stats: Stat[];
+	setStats: (stats: Stat[]) => void;
+}
+
+export const initialState = {
+	stats: [],
+};
+
+const trainingContentStore = create<TrainingContentState>((set) => ({
+	...initialState,
+    setStats: (stats: Stat[]) => set(() => ({stats})),
+}));
+
+export default trainingContentStore;