Function renderCookbookSection

website/src/scripts/pages/samples-render.ts:92–131

(
  cookbook: Cookbook,
  recipes: { recipe: Recipe; highlightedName?: string }[],
  selectedLanguage: string | null
)

}

function renderCookbookSection(
  cookbook: Cookbook,
  recipes: { recipe: Recipe; highlightedName?: string }[],
  selectedLanguage: string | null
): string {
  const languageTabs = cookbook.languages
    .map(
      (language) => `
    <button class="lang-tab${selectedLanguage === language.id ? " active" : ""}"
            data-lang="${escapeHtml(language.id)}"
            title="${escapeHtml(language.name)}">
      ${escapeHtml(language.icon)}
    </button>
  `
    )
    .join("");

  const recipeCards = recipes
    .map(({ recipe, highlightedName }) =>
      renderRecipeCard(cookbook, recipe, selectedLanguage, highlightedName)
    )
    .join("");

  return `
    <div class="cookbook-section" data-cookbook="${escapeHtml(cookbook.id)}">
      <div class="cookbook-header">
        <div class="cookbook-info">
          <h2>${escapeHtml(cookbook.name)}</h2>
          <p>${escapeHtml(cookbook.description)}</p>
        </div>
        <div class="cookbook-languages">
          ${languageTabs}
        </div>
      </div>
      <div class="recipes-grid">
        ${recipeCards}
      </div>
    </div>
  `;
}

function renderRecipeCard(
  cookbook: Cookbook,