56 lines
1.8 KiB
TypeScript
56 lines
1.8 KiB
TypeScript
// Metro module 14214 (f14215).
|
|
import { memo, useContext } from "react";
|
|
import { View } from "react-native";
|
|
import { createStyles } from "../../../../design/components/Styles/native/createStyles";
|
|
import QuestDockContext from "./QuestDockContext";
|
|
import { useQuestTaskDetails, useTaskPlatformScreen } from "../../hooks/QuestHooks";
|
|
import { useQuestBarTitle, useQuestBarSubtitle } from "../../hooks/QuestCopyHooks";
|
|
import { QuestContent } from "../../QuestTypes";
|
|
import QuestProgressIndicator from "../QuestProgressIndicator";
|
|
import { Text } from "../../../../design/components/Text/native/Text";
|
|
const useStyles = createStyles({
|
|
wrapper: {
|
|
alignItems: "center",
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
flexGrow: 1,
|
|
flexShrink: 1,
|
|
gap: 8,
|
|
justifyContent: "center",
|
|
padding: 8
|
|
},
|
|
progressIndicatorWrapper: {
|
|
flexGrow: 0,
|
|
flexShrink: 0
|
|
},
|
|
copy: {
|
|
flexGrow: 1,
|
|
flexShrink: 1
|
|
}
|
|
});
|
|
const r34 = memo(function QuestDockEnrolledHeader() {
|
|
const quest = useContext(QuestDockContext).quest;
|
|
const styles = useStyles();
|
|
const questTaskDetails = useQuestTaskDetails(quest);
|
|
const [activeScreen] = useTaskPlatformScreen(quest, questTaskDetails);
|
|
return <View style={styles.wrapper}>
|
|
<View style={styles.progressIndicatorWrapper}>
|
|
<QuestProgressIndicator quest={quest} size="x-sm" progress={questTaskDetails.percentComplete} loading={false} hasConfetti />
|
|
</View>
|
|
<View style={styles.copy}>
|
|
<Text variant="heading-md/semibold" color="mobile-text-heading-primary">
|
|
{useQuestBarTitle(quest)}
|
|
</Text>
|
|
<Text variant="text-sm/medium" color="text-muted">
|
|
{useQuestBarSubtitle({
|
|
quest,
|
|
isExpanded: false,
|
|
activeScreen,
|
|
sourceQuestContent: QuestContent.QUEST_BAR_MOBILE
|
|
})}
|
|
</Text>
|
|
</View>
|
|
</View>;
|
|
});
|
|
export default r34;
|