Function RecipeHero

examples/ts-react-native-chat/src/App.tsx:311–400

({
  part,
  isLoading,
}: {
  part?: StructuredRecipePart
  isLoading: boolean
})

}

function RecipeHero({
  part,
  isLoading,
}: {
  part?: StructuredRecipePart
  isLoading: boolean
}) {
  const recipe = getRecipeSource(part)
  const preparing = isLoading || part?.status === 'streaming'
  const title =
    valueToString(recipe?.title) ??
    (preparing ? 'Preparing your recipe...' : 'Your next recipe starts here')
  const summary =
    valueToString(recipe?.summary) ??
    (preparing
      ? 'Building a clear recipe with ingredients, steps, timing, and notes.'
      : 'Ask for a dinner idea, then revise it with follow-up prompts. Your latest recipe appears here.')
  const servings = valueToString(recipe?.servings)
  const totalMinutes = valueToString(recipe?.totalMinutes)
  const revision = valueToString(recipe?.revision)
  const tags = valueToList(recipe?.tags)
  const ingredients = valueToList(recipe?.ingredients)
  const steps = valueToList(recipe?.steps)
  const tips = valueToList(recipe?.tips)
  const warnings = [
    ...valueToList(recipe?.warnings),
    ...valueToList(recipe?.allergens),
  ]
  const prompts = valueToList(recipe?.fromPrompt)
  const tagLabels = dedupeLabels([...tags, ...prompts])

  return (
    <View
      style={[styles.recipeHero, preparing ? styles.recipeHeroPreparing : null]}
    >
      <View style={styles.heroTopRow}>
        <Text style={styles.heroEyebrow}>
          {preparing ? 'Preparing your recipe...' : 'Recipe card'}
        </Text>
        {revision ? (
          <Text style={styles.revisionBadge}>Revision {revision}</Text>
        ) : null}
      </View>

      {preparing ? (
        <View style={styles.preparingBanner}>
          <Text style={styles.preparingTitle}>
            {recipe ? 'Updating your recipe' : 'Starting a fresh recipe'}
          </Text>
          <Text style={styles.preparingText}>
            {recipe
              ? 'New ingredients and steps will replace this card as soon as they are ready.'
              : 'Preparing your recipe card now.'}
          </Text>
        </View>
      ) : null}

      <Text style={styles.recipeTitle}>{title}</Text>