File size: 2,092 Bytes
5c876be | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | import React from 'react';
import { useTheme, Chip } from 'react-native-paper';
import type { RideStatus } from '../../types/ride';
import { RIDE_STATUS_LABELS } from '../../utils/constants';
export interface StatusChipProps {
/** The ride status to visualise */
status: RideStatus;
}
/**
* Coloured chip that displays the human-readable label for a ride status.
*
* Colour mapping (M3 tokens):
* - active → primary
* - ongoing → rideActive (amber via tertiary)
* - matched → primary
* - completed → outline variant
* - cancelled → error
* - draft → outline variant
*/
export function StatusChip({ status }: StatusChipProps) {
const theme = useTheme();
const chipStyle: Record<RideStatus, { bgColor: string; textColor: string }> = {
active: {
bgColor: theme.colors.primaryContainer,
textColor: theme.colors.onPrimaryContainer,
},
ongoing: {
bgColor: theme.colors.tertiaryContainer,
textColor: theme.colors.onTertiaryContainer,
},
matched: {
bgColor: theme.colors.secondaryContainer,
textColor: theme.colors.onSecondaryContainer,
},
completed: {
bgColor: 'transparent',
textColor: theme.colors.outline,
},
cancelled: {
bgColor: theme.colors.errorContainer,
textColor: theme.colors.onErrorContainer,
},
draft: {
bgColor: 'transparent',
textColor: theme.colors.outline,
},
};
const variant: Record<RideStatus, 'flat' | 'outlined'> = {
active: 'flat',
ongoing: 'flat',
matched: 'flat',
completed: 'outlined',
cancelled: 'flat',
draft: 'outlined',
};
const colors = chipStyle[status];
return (
<Chip
mode={variant[status]}
style={[
styles.chip,
{
backgroundColor: colors.bgColor,
},
]}
textStyle={{
color: colors.textColor,
fontSize: 12,
}}
compact
>
{RIDE_STATUS_LABELS[status]}
</Chip>
);
}
const styles = {
chip: {
height: 28,
justifyContent: 'center',
} as const,
};
|