Feat: display students on home page

thi-app/app/(drawer)/home.tsx

@@ -1,10 +1,19 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { ScrollView, View, Text, TouchableOpacity, SafeAreaView } from "react-native";
 import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';
+import { Student } from '@/types';
+import { sampleStudents } from './students';
+import { StudentCard } from '@/components/StudentCard';
 
 export const teacherName = "Jane Summers";
 
 const homePage = () => {
+  const [students, setStudents] = useState<Student[]>([]);
+
+  useEffect(() => {
+    setStudents(sampleStudents); // Load the sample students
+  }, []);
+
   return (
     <SafeAreaView className="flex-1">
       <ScrollView className="px-12 py-8">
@@ -30,11 +39,18 @@ const homePage = () => {
 
         <View className="mb-5">
           <Text className="text-lg font-bold mb-8">Students</Text>
-          <View className="p-8 h-[59px] mb-4 bg-white rounded-lg shadow-md justify-center items-center">
-            <Text>
-            There Is No Data To Currently Display
-            </Text>
-          </View>
+          <View className="flex-row flex-wrap justify-between gap-y-4">
+          {students.map((student) => (
+            <View
+            key={student.id}
+            style={{
+              width: "28%",
+            }}
+          >
+              <StudentCard student={student} />
+            </View>
+          ))}
+        </View>
         </View>
       </ScrollView>
     </SafeAreaView>

thi-app/app/index.tsx

@@ -1,4 +1,4 @@
-import Login from '@/components/login';
+import Login from '@/components/Login';
 import React from 'react';
 import { View } from 'react-native';