Header.astro

---
import { Image } from "astro:assets";
import { directory, directoryByGroup, groups } from "~/util/directory";
import { changelogProductIds } from "~/util/changelog";

import RSSButton from "~/components/RSSButton.astro";
import ProductSelect from "~/components/changelog/ProductSelect";
import HeroImage from "~/assets/images/changelog/hero.svg";

interface Props {
	showProductSelect?: boolean;
}

const { showProductSelect = true } = Astro.props;

// Only show products and groups that have at least one visible changelog entry.
const products = directory.filter(
	(entry) => entry.data.entry.url && changelogProductIds.includes(entry.id),
);

const filteredGroups = groups.filter((group) => {
	const groupProducts =
		directoryByGroup.find(([name]) => name === group)?.[1] ?? [];
	return groupProducts.some((p) => changelogProductIds.includes(p.id));
});

const currentPath = Astro.url.pathname;
---

<div
	id="changelogHeader"
	class="mt-0! mb-8 ml-[calc(50%-50vw)] flex w-screen items-center justify-evenly border-b-2 border-b-(--sl-color-hairline) bg-linear-to-r from-[#FFE9CB99] to-[#FFFFFF99] p-4 max-sm:flex-col-reverse sm:mb-16 sm:h-[18.75rem] dark:from-[#FBAD411F] dark:to-[#2C2C2C00]"
>
	<div class="text-center sm:text-left">
		<h1>Changelog</h1>
		<p>New updates and improvements at Cloudflare.</p>
		<div
			class="flex flex-row flex-wrap items-center justify-center gap-x-3 sm:flex-col sm:items-start"
		>
			<RSSButton changelog="index" />
			<RSSButton
				href="/fundamentals/new-features/available-rss-feeds/"
				text="View RSS feeds"
				icon="right-caret"
			/>
		</div>
		{
			showProductSelect && (
				<div class="not-content">
					<ProductSelect
						client:load
						products={products}
						groups={filteredGroups}
						currentPath={currentPath}
					/>
				</div>
			)
		}
	</div>
	<Image
		src={HeroImage}
		alt="hero image"
		height="240"
		class="mt-0!"
		id="changelogHero"
	/>
</div>

<style is:global>
	.sl-markdown-content {
		margin-top: 0px !important;
	}

	.content-panel {
		padding-top: 0 !important;
		overflow-x: hidden;
	}

	@media (max-width: 640px) {
		#changelogHeader h1 {
			font-size: 1.75rem;
		}

		#changelogHero {
			display: none;
		}
	}
</style>