yeet

modules/saved_messages/native/ForLaterCardReminderHeader.tsx

@@ -0,0 +1,54 @@
+// 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>;
+}