55 lines
1.9 KiB
TypeScript
55 lines
1.9 KiB
TypeScript
// Metro module 9950 (f9951).
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../design/components/Styles/native/createStyles";
|
|
import Module712 from "../../../_bundle/Module712";
|
|
import { useDueInString, DueInStringTypes } from "../SavedMessageUtils";
|
|
import { ClockIcon } from "../../../design/components/Icon/native/redesign/generated/ClockIcon";
|
|
import { Text } from "../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
container: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
backgroundColor: Module712.colors.BACKGROUND_BASE_LOWER,
|
|
borderTopLeftRadius: Module712.radii.lg,
|
|
borderTopRightRadius: Module712.radii.lg,
|
|
overflow: "hidden",
|
|
gap: 8,
|
|
marginHorizontal: -16,
|
|
marginTop: -16,
|
|
paddingHorizontal: 16,
|
|
paddingVertical: 12
|
|
},
|
|
icon: {
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: Module712.radii.sm,
|
|
backgroundColor: Module712.colors.CARD_BACKGROUND_DEFAULT,
|
|
alignItems: "center",
|
|
justifyContent: "center"
|
|
},
|
|
actionsContainer: {
|
|
marginVertical: -4,
|
|
marginLeft: "auto"
|
|
}
|
|
});
|
|
export function ForLaterCardReminderHeader(props) {
|
|
const { savedMessage, throttledNow, actions } = props;
|
|
const styles = useStyles();
|
|
const dueInString = useDueInString({
|
|
dueAt: savedMessage == null ? void 0 : savedMessage.saveData.dueAt,
|
|
now: throttledNow,
|
|
type: DueInStringTypes.SHORT
|
|
});
|
|
const { dueInText, isOverdue } = dueInString;
|
|
if (savedMessage.saveData.dueAt == null) {
|
|
return null;
|
|
}
|
|
return <View style={styles.container}>
|
|
<View style={styles.icon}>
|
|
<ClockIcon size="xxs" color={isOverdue ? Module712.colors.TEXT_FEEDBACK_CRITICAL : Module712.colors.INTERACTIVE_TEXT_DEFAULT} />
|
|
</View>
|
|
<Text variant="text-md/semibold" color={isOverdue ? "text-feedback-critical" : "mobile-text-heading-primary"}>{dueInText}</Text>
|
|
<View style={styles.actionsContainer}>{actions}</View>
|
|
</View>;
|
|
}
|