add details to tripdetails

andrew-bierman · Sep 12, 2024 · a23c377 · a23c377
1 parent c771869
commit a23c377
Showing 1 changed file with 28 additions and 39 deletions.
diff --git a/packages/app/screens/trip/TripDetails.tsx b/packages/app/screens/trip/TripDetails.tsx
@@ -2,7 +2,7 @@ import React, { useEffect } from 'react';
 import { createParam } from 'app/hooks/params';
 import { format } from 'date-fns';
 import { View } from 'react-native';
-import { RText, RStack } from '@packrat/ui';
+import { RText, Details, RStack } from '@packrat/ui';
 import { DetailsComponent } from '../../components/details';
 import { Platform, FlatList, Dimensions, Text } from 'react-native';
 import { CLIENT_URL } from '@packrat/config';
@@ -99,44 +99,33 @@ export function TripDetails() {
                     switch (item[1]) {
                       case SECTION.DESCRIPTION:
                         return (
-                          <View style={{ marginBottom: '5%' }}>
-                            {data?.description && (
-                              <RStack>
-                                <Text style={styles.descriptionText}>
-                                  Description: {data?.description}
-                                </Text>
-                              </RStack>
-                            )}
-                            {data?.type && (
-                              <RStack>
-                                <Text style={styles.descriptionText}>
-                                  Activity:{' '}
-                                  {formatTripActivityLabel(data?.type)}
-                                </Text>
-                              </RStack>
-                            )}
-                            {data?.destination && (
-                              <RStack>
-                                <Text style={styles.descriptionText}>
-                                  Destination: {data?.destination}
-                                </Text>
-                              </RStack>
-                            )}
-                            {data.start_date && (
-                              <RStack>
-                                <Text style={styles.descriptionText}>
-                                  Start Date:{data.start_date}
-                                </Text>
-                              </RStack>
-                            )}
-                            {data.end_date && (
-                              <RStack>
-                                <Text style={styles.descriptionText}>
-                                  End Date:{data.end_date}
-                                </Text>
-                              </RStack>
-                            )}
-                          </View>
+                          <RStack style={{ width: '20%' }}>
+                            <RText>{data?.description}</RText>
+                            <Details
+                              items={[
+                                {
+                                  key: 'start_date',
+                                  label: 'Start Date',
+                                  value: data?.start_date,
+                                },
+                                {
+                                  key: 'end_date',
+                                  label: 'End Date',
+                                  value: data?.end_date,
+                                },
+                                {
+                                  key: 'activity',
+                                  label: 'Activity',
+                                  value: data?.activity,
+                                },
+                                {
+                                  key: 'destination',
+                                  label: 'Destination',
+                                  value: data?.destination,
+                                },
+                              ]}
+                            />
+                          </RStack>
                         );
                       case SECTION.TABLE:
                         return (