feat: finish history list

src/screens/History.tsx

@@ -1,14 +1,46 @@
-import { VStack } from '@gluestack-ui/themed';
+import { useState } from 'react';
+import { SectionList } from 'react-native';
+import { Heading, Text, VStack } from '@gluestack-ui/themed';
 
 import { HistoryCard } from '@components/HistoryCard';
 import { ScreenHeader } from '@components/ScreenHeader';
 
+const DATA = [
+  {
+    title: '22.08.2024',
+    data: ['Puxada frontal', 'Puxada lateral'],
+  },
+  {
+    title: '23.08.2024',
+    data: ['Puxada frontal'],
+  },
+];
+
 export function History() {
+  const [exercises, setExercises] = useState(DATA);
+
   return (
     <VStack flex={1}>
       <ScreenHeader title="Histórico" />
 
-      <HistoryCard />
+      <SectionList
+        sections={exercises}
+        keyExtractor={(item) => item}
+        renderItem={({ item }) => <HistoryCard />}
+        renderSectionHeader={({ section }) => (
+          <Heading color="$gray200" fontSize="$md" mt="$10" mb="$3">
+            {section.title}
+          </Heading>
+        )}
+        style={{ paddingHorizontal: 32 }}
+        contentContainerStyle={exercises.length === 0 && { flex: 1, justifyContent: 'center' }}
+        ListEmptyComponent={() => (
+          <Text color="$gray100" textAlign="center">
+            Não há exercícios registrados ainda.{'\n'}Vamos fazer exercícios hoje?
+          </Text>
+        )}
+        showsVerticalScrollIndicator={false}
+      />
     </VStack>
   );
 }