feat: course card redesign

app/(app)/(tabs)/index.tsx

@@ -1,13 +1,15 @@
-import { List, Surface, Text } from 'react-native-paper'
+import { useRouter } from 'expo-router'
+import React from 'react'
+import { Pressable } from 'react-native'
+import { Surface } from 'react-native-paper'
 
 import { useCourses } from '@/lib/clients/classroom'
-import { View } from 'react-native'
-import React from 'react'
-import { Link } from 'expo-router'
+import CourseCard from '@/lib/ui/components/CourseCard'
 import Loading from '@/lib/ui/components/Loading'
 
 function TabsHome() {
   const { data, isLoading } = useCourses()
+  const router = useRouter()
 
   if (isLoading) {
     return <Loading />
@@ -15,11 +17,15 @@ function TabsHome() {
 
   return (
     <Surface className="flex-1">
-      <Text>My Courses</Text>
       {data?.courses.map((course) => (
-        <Link href={`/drawer/courses/${course.id}`} key={course.id}>
-          <Text className='text-blue-500'>{course.name}</Text>
-        </Link>
+        <Pressable
+          key={course.id}
+          onPress={() => {
+            router.push(`/drawer/courses/${course.id}`)
+          }}
+        >
+          <CourseCard key={course.id} {...course} />
+        </Pressable>
       ))}
     </Surface>
   )

lib/ui/components/CourseCard.tsx

@@ -0,0 +1,43 @@
+import type { classroom_v1 } from '@googleapis/classroom'
+import { View } from 'react-native'
+import { Card, Text } from 'react-native-paper'
+
+const COURSE_COLORS = [
+  'bg-green-600',
+  'bg-blue-600',
+  'bg-yellow-500',
+  'bg-red-600',
+  'bg-pink-400',
+  'bg-gray-500',
+]
+
+export default function CourseCard(course: classroom_v1.Schema$Course) {
+  const { name, section, courseState, id } = course
+  const colorIndex = parseInt(id || '0', 16) % COURSE_COLORS.length
+  const bannerColor = COURSE_COLORS[colorIndex]
+
+  return (
+    <Card className="mx-4 my-2 rounded-lg overflow-hidden">
+      <Card.Content className={`p-4 pb-6 ${bannerColor}`}>
+        <Text variant="titleLarge" className="font-bold text-white">
+          {name || 'Untitled Course'}
+        </Text>
+      </Card.Content>
+
+      <Card.Content className="p-4">
+        {section && (
+          <Text variant="bodyMedium" className="text-gray-600 mb-1">
+            {section}
+          </Text>
+        )}
+        {courseState && courseState !== 'ACTIVE' && (
+          <View className="absolute right-4 top-2 bg-black/5 px-2 py-0.5 rounded">
+            <Text variant="labelSmall" className="text-gray-700">
+              {courseState}
+            </Text>
+          </View>
+        )}
+      </Card.Content>
+    </Card>
+  )
+}