ob248.com/src/components/Header.astro

---
const { currentPage } = Astro.props;

const pages = [
    { title: "home", path: "/" },
    { title: "about", path: "/about" },
];
---

<style>
    .cancel-button {
        color: var(--ayu-red-500);
        cursor: pointer;
    }

    .cancel-button .text {
        transition: color 0.2s ease;
        color: var(--ayu-accent);
    }

    .cancel-button:hover .text {
        color: var(--ayu-red-500);
    }
</style>

<header>
    <div
        class="w-full flex items-center justify-between px-4 py-2 border-b-1 border-ayu-gutter"
    >
        <div class="flex items-center">
            <a href="/" class="flex items-center gap-2">
                <img
                    src="/favicon.svg"
                    alt="oliver bryan icon"
                    class="h-6 w-6"
                />
                <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1></a
            >
            {
                !pages.find((page) => page.path === currentPage.path) && (
                    <span class="flex items-center justify-start ml-4 text-ayu-gutter text-md">
                        {"|"}
                        <button
                            class="cancel-button flex items-center justify-center gap-2 ml-4"
                            type="button"
                            onclick="window.location.href='/'"
                        >
                            <span class="text">{currentPage.path} </span>
                            <span class="text-2xl leading-none text-ayu-red-500">
                                &times;
                            </span>
                        </button>
                    </span>
                )
            }
        </div>
    </div>
</header>