ob248.com/src/components/Header.astro

---
import NavLink from "./NavLink.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 gap-3 px-4 py-2 border-b-1 border-ayu-gutter"
    >
        <img src="/favicon.svg" alt="oliver bryan icon" class="h-6 w-6" />
        <h1 class="text-2xl text-ayu-red-500">oliver bryan</h1>
    </div>
    <div
        class="w-full flex gap-4 px-4 py-2 border-b-1 border-ayu-gutter items-center"
    >
        {
            pages.map((page) => (
                <NavLink
                    currentPage={currentPage}
                    title={page.title}
                    href={page.path}
                />
            ))
        }

        {
            !pages.find((page) => page.path === currentPage.path) && (
                <span class="flex items-center justify-start gap-4 text-ayu-gutter">
                    {"|"}
                    <button
                        class="cancel-button flex items-center justify-center gap-2"
                        type="button"
                        onclick="window.location.href='/'"
                    >
                        <span class="text-sm text">{currentPage.path} </span>
                        <span class="text-xl leading-none text-ayu-red-500">
                            &times;
                        </span>
                    </button>
                </span>
            )
        }
    </div>
</header>