e95dd9987a
The button title on the main page has been changed to "Explore ScrewFast on GitHub". Also, the title for AnnouncementBanner is now optional, enabling use of the banner without a predefined title, increasing its reusability. The CSS styles have also been updated to accommodate these changes.
82 lines
2.9 KiB
Text
82 lines
2.9 KiB
Text
---
|
|
const { title, btnId, btnTitle, url } = Astro.props;
|
|
|
|
interface Props {
|
|
title?: string;
|
|
btnId: string;
|
|
btnTitle: string;
|
|
url: string;
|
|
}
|
|
---
|
|
|
|
<astro-banner btnId={btnId}>
|
|
<div
|
|
class="fixed bottom-0 start-1/2 z-50 mx-auto w-full -translate-x-1/2 transform p-6 sm:max-w-4xl"
|
|
>
|
|
<div
|
|
class="rounded-xl bg-neutral-800 bg-[url('/banner-pattern.svg')] bg-cover bg-center bg-no-repeat p-4 text-center shadow-sm dark:bg-neutral-200"
|
|
>
|
|
<div class="flex items-center justify-center">
|
|
<div class="ml-auto">
|
|
{title &&
|
|
<p
|
|
class="me-2 inline-block font-medium text-neutral-50 dark:text-neutral-700"
|
|
>
|
|
{title}
|
|
</p>
|
|
}
|
|
<a
|
|
class="group inline-flex items-center gap-x-2 rounded-full border-2 border-neutral-50 backdrop-brightness-75 sm:backdrop-brightness-100 px-3 py-2 text-sm font-semibold text-neutral-50 transition duration-300 hover:border-neutral-100/70 hover:text-neutral-50/70 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:text-neutral-700 dark:hover:border-neutral-700/70 dark:hover:text-neutral-800/70 dark:focus:outline-none"
|
|
href={url}
|
|
target="_blank"
|
|
>
|
|
{btnTitle}
|
|
<svg
|
|
class="size-4 flex-shrink-0 transition duration-300 group-hover:translate-x-1"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"><path d="m9 18 6-6-6-6"></path></svg
|
|
>
|
|
</a>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="ml-auto inline-flex items-center gap-x-2 rounded-full border border-transparent bg-gray-100 p-2 text-sm font-semibold text-gray-800 hover:bg-gray-200 disabled:pointer-events-none disabled:opacity-50 dark:bg-neutral-700 dark:text-neutral-50 dark:hover:bg-neutral-700/80 dark:hover:text-neutral-50 dark:focus:outline-none"
|
|
id={btnId}
|
|
>
|
|
<span class="sr-only">Dismiss</span>
|
|
<svg
|
|
class="size-5 flex-shrink-0"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg
|
|
>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</astro-banner>
|
|
<script>
|
|
class AstroBanner extends HTMLElement {
|
|
connectedCallback() {
|
|
const btnId = this.getAttribute("btnId");
|
|
const button = this.querySelector(`#${btnId}`);
|
|
if (button != null) {
|
|
button.addEventListener("click", () => this.remove());
|
|
}
|
|
}
|
|
}
|
|
|
|
customElements.define("astro-banner", AstroBanner);
|
|
</script>
|