feat: create history card component

src/components/HistoryCard.tsx

@@ -0,0 +1,29 @@
+import { Heading, HStack, Text, VStack } from '@gluestack-ui/themed';
+
+export function HistoryCard() {
+  return (
+    <HStack
+      w="$full"
+      px="$5"
+      py="$4"
+      mb="$3"
+      bg="$gray600"
+      rounded="$md"
+      alignItems="center"
+      justifyContent="space-between">
+      <VStack mr="$5">
+        <Heading color="$white" fontSize="$md" textTransform="capitalize">
+          Costas
+        </Heading>
+
+        <Text color="$gray100" fontSize="$lg" numberOfLines={1}>
+          Puxada Frontal
+        </Text>
+      </VStack>
+
+      <Text color="$gray300" fontSize="$md">
+        08:36
+      </Text>
+    </HStack>
+  );
+}

src/screens/History.tsx

@@ -1,10 +1,14 @@
-import { ScreenHeader } from '@components/ScreenHeader';
 import { VStack } from '@gluestack-ui/themed';
 
+import { HistoryCard } from '@components/HistoryCard';
+import { ScreenHeader } from '@components/ScreenHeader';
+
 export function History() {
   return (
     <VStack flex={1}>
       <ScreenHeader title="Histórico" />
+
+      <HistoryCard />
     </VStack>
   );
 }