29 lines
1.2 KiB
JavaScript
29 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { Pressable, ScrollView, Text, View } from 'react-native';
|
|
import { styles } from '../styles';
|
|
|
|
export default function TripPicker({ trips, selectedTripId, onChooseTrip }) {
|
|
return (
|
|
<View style={styles.tripPickerWrap}>
|
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.tripChipScroll}>
|
|
{trips.length ? (
|
|
trips
|
|
.slice()
|
|
.sort((a, b) => b.startDate.localeCompare(a.startDate))
|
|
.map((trip) => {
|
|
const active = selectedTripId === trip.id;
|
|
return (
|
|
<Pressable key={trip.id} style={[styles.tripChip, active && styles.tripChipActive]} onPress={() => onChooseTrip(trip.id)}>
|
|
<Text style={[styles.tripChipText, active && styles.tripChipTextActive]}>{trip.name}</Text>
|
|
<Text style={[styles.tripChipSub, active && styles.tripChipSubActive]}>{trip.startDate}</Text>
|
|
</Pressable>
|
|
);
|
|
})
|
|
) : (
|
|
<Text style={styles.muted}>Create your first trip to start.</Text>
|
|
)}
|
|
</ScrollView>
|
|
</View>
|
|
);
|
|
}
|