yeet

modules/game_profile/native/components/GameProfileNavigationHeader.tsx

@@ -0,0 +1,119 @@
+// Metro module 11946 (f11947).
+import { useEffect, useMemo } from "react";
+import { Image as Image2, StyleSheet, View } from "react-native";
+import { createStyles } from "../../../../design/components/Styles/native/createStyles";
+import Module712 from "../../../../_bundle/Module712";
+import ReanimatedRexport, { useSharedValue, useAnimatedStyle } from "../../../reanimated/ReanimatedRexport";
+import { withTiming } from "../../../../design/animation/reanimated/timing/timing";
+import { SUPPORTS_WEBP } from "../../../../utils/AvatarUtils";
+import { BackgroundBlurFill } from "../../../../design/components/experimental/native";
+import { Heading } from "../../../../design/components/Text/native/Text";
+import GameProfileRankPill from "./GameProfileRankPill";
+const useStyles = createStyles({
+  headerContainer: {
+    height: 56,
+    paddingHorizontal: Module712.space.PX_16,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Module712.colors.BORDER_SUBTLE,
+    overflow: "hidden",
+    justifyContent: "center"
+  },
+  headerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8
+  },
+  icon: {
+    width: 32,
+    height: 32,
+    borderRadius: Module712.radii.sm
+  },
+  titleContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: Module712.space.PX_8,
+    minWidth: 0
+  },
+  headerRight: {
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  rankPillContainer: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center"
+  }
+});
+const __initData = {
+  code: "function GameProfileNavigationHeaderTsx1(){const{headerRightProgress}=this.__closure;return{opacity:headerRightProgress.get()};}"
+};
+const __initData2 = {
+  code: "function GameProfileNavigationHeaderTsx2(){const{headerRightProgress}=this.__closure;return{opacity:1-headerRightProgress.get()};}"
+};
+export default function GameProfileNavigationHeader(props) {
+  const { game, application, headerRight } = props;
+  const styles = useStyles();
+  const r4 = headerRight != null;
+  let c19280_2 = r4;
+  const sharedValue = useSharedValue(r4 ? 1 : 0);
+  useEffect(() => {
+    sharedValue.set(withTiming(c19280_2 ? 1 : 0, {
+      duration: 200
+    }));
+  }, [r4, sharedValue]);
+  const x = () => ({
+    opacity: sharedValue.get()
+  });
+  x.__closure = {
+    headerRightProgress: sharedValue
+  };
+  x.__workletHash = 16001524280109;
+  x.__initData = __initData;
+  const animatedStyle = useAnimatedStyle(x);
+  const b = () => ({
+    opacity: 1 - sharedValue.get()
+  });
+  b.__closure = {
+    headerRightProgress: sharedValue
+  };
+  b.__workletHash = 5182160908530;
+  b.__initData = __initData2;
+  const animatedStyle2 = useAnimatedStyle(b);
+  const memo = useMemo(() => {
+    let r4 = game == null ? void 0 : game.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
+    if (r4 == null) {
+      r4 = application == null ? void 0 : application.getIconURL(32, SUPPORTS_WEBP ? "webp" : "png");
+    }
+    if (r4 == null) {
+      r4 = null;
+    }
+    return r4;
+  }, [game, application]);
+  let r21 = game?.name;
+  if (r21 == null) {
+    r21 = application?.name;
+  }
+  const r55 = r21 == null;
+  const r56 = r55 ? null : <View style={styles.headerContainer}>
+    <BackgroundBlurFill />
+    <View style={styles.headerRow}>
+      {memo != null && <Image2 source={{
+        uri: memo
+      }} style={styles.icon} />}
+      <View style={styles.titleContainer}>
+        <Heading variant="redesign/heading-18/bold" color="mobile-text-heading-primary" lineClamp={1}>{r21}</Heading>
+        {game?.l30Rank != null && <View style={styles.rankPillContainer}>
+          <GameProfileRankPill rank={game.l30Rank} compact />
+          <ReanimatedRexport.View style={[StyleSheet.absoluteFill, animatedStyle2]}>
+            <GameProfileRankPill rank={game.l30Rank} />
+          </ReanimatedRexport.View>
+        </View>}
+      </View>
+      {headerRight != null && <ReanimatedRexport.View style={[styles.headerRight, animatedStyle]}>
+        {headerRight()}
+      </ReanimatedRexport.View>}
+    </View>
+  </View>;
+  return r56;
+};