<commit_before>import { MarketingCollectionHeaderFragment_marketingCollection$key } from "__generated__/MarketingCollectionHeaderFragment_marketingCollection.graphql"
import { Flex, Spacer, Text } from "palette"
import { ImageBackground, ImageSourcePropType } from "react-native"
import { graphql, useFragment } from "react-relay"
import { OnboardingMarketingCollectionSlug } from "../OnboardingMarketingCollection"

interface MarketingCollectionHeaderProps {
  collectionSlug: OnboardingMarketingCollectionSlug
  description: string
  marketingCollection: MarketingCollectionHeaderFragment_marketingCollection$key
}

export const images: Record<OnboardingMarketingCollectionSlug, ImageSourcePropType> = {
  "artists-on-the-rise": require("images/CohnMakeAMountain.webp"),
  "trove-editors-picks": require("images/HirstTheWonder.webp"),
  "top-auction-lots": require("images/HirstTheWonder.webp"),
}

const SAVE_INSTRUCTIONS = "Love an artwork? Tap twice to save it."

export const MarketingCollectionHeader: React.FC<MarketingCollectionHeaderProps> = ({
  collectionSlug,
  marketingCollection,
  description,
}) => {
  const collection = useFragment(marketingCollectionHeaderFragment, marketingCollection)

  return (
    <ImageBackground style={{ height: 230 }} resizeMode="cover" source={images[collectionSlug]}>
      <Flex pt={6} px={2}>
        <Text variant="xl" color="white100">
          {collection.title}
        </Text>
        <Spacer mt={2} />
        <Text variant="sm" color="white100">
          {description}
        </Text>
        <Spacer mt={2} />
        <Text variant="sm" color="white100">
          {SAVE_INSTRUCTIONS}<commit_msg>fix: make CollectionHeader container slightly bigger (#7527)<commit_after>import { MarketingCollectionHeaderFragment_marketingCollection$key } from "__generated__/MarketingCollectionHeaderFragment_marketingCollection.graphql"
import { Flex, Spacer, Text } from "palette"
import { ImageBackground, ImageSourcePropType } from "react-native"
import { graphql, useFragment } from "react-relay"
import { OnboardingMarketingCollectionSlug } from "../OnboardingMarketingCollection"

interface MarketingCollectionHeaderProps {
  collectionSlug: OnboardingMarketingCollectionSlug
  description: string
  marketingCollection: MarketingCollectionHeaderFragment_marketingCollection$key
}

export const images: Record<OnboardingMarketingCollectionSlug, ImageSourcePropType> = {
  "artists-on-the-rise": require("images/CohnMakeAMountain.webp"),
  "trove-editors-picks": require("images/HirstTheWonder.webp"),
  "top-auction-lots": require("images/HirstTheWonder.webp"),
}

const SAVE_INSTRUCTIONS = "Love an artwork? Tap twice to save it."

export const MarketingCollectionHeader: React.FC<MarketingCollectionHeaderProps> = ({
  collectionSlug,
  marketingCollection,
  description,
}) => {
  const collection = useFragment(marketingCollectionHeaderFragment, marketingCollection)

  return (
    <ImageBackground style={{ minHeight: 250 }} resizeMode="cover" source={images[collectionSlug]}>
      <Flex pt={6} px={2}>
        <Text variant="xl" color="white100">
          {collection.title}
        </Text>
        <Spacer mt={2} />
        <Text variant="sm" color="white100">
          {description}
        </Text>
        <Spacer mt={2} />
        <Text variant="sm" color="white100">
          {SAVE_INSTRUCTIONS}
{'fraction_non_alphanumeric': 0.10998810939357907, 'fraction_numerical': 0.01070154577883472, 'mean_word_length': 5.2199630314232905, 'pattern_counts': {'":': 6, '<': 25, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1119363', 'n_tokens_mistral': 974, 'n_tokens_neox': 934, 'n_words': 189}