packages/omni-ui/omni-web/src/components/Banner.hbs

<div x-data="{
        bannerVisible: true,
        bannerVisibleAfter: 300,
        bannerTitle: '',
        bannerDescription: '',
        linkTitle: ' here',
        link: ''
    }" @top-banner-show.window="
        bannerTitle = event.detail.bannerTitle
        bannerDescription = event.detail.bannerDescription
        link = event.detail.link
        setTimeout(()=>{ bannerVisible = true }, bannerVisibleAfter)
    "
    x-show="bannerVisible === true && bannerTitle !== '' && bannerDescription !== ''"
    x-transition:enter="transition ease-out duration-500"
    x-transition:enter-start="-translate-y-10"
    x-transition:enter-end="translate-y-0"
    x-transition:leave="transition ease-in duration-300"
    x-transition:leave-start="translate-y-0"
    x-transition:leave-end="-translate-y-10"
    class="fixed top-0 left-0 w-full h-auto py-2 duration-300 ease-out bg-yellow-200 shadow-sm sm:py-0 sm:h-10 z-50" x-cloak>
    <div class="flex items-center justify-between w-full h-full px-3 mx-auto ">
        <div class="flex flex-col w-full h-full text-xs leading-6 text-black duration-150 ease-out sm:flex-row sm:items-center opacity-80 hover:opacity-100">
            <span class="flex items-center">
                <svg class="w-[18px] h-[18px] mr-1.5 -ml-1" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM12 9C12.5523 9 13 8.55228 13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8C11 8.55228 11.4477 9 12 9ZM13 12C13 11.4477 12.5523 11 12 11C11.4477 11 11 11.4477 11 12V16C11 16.5523 11.4477 17 12 17C12.5523 17 13 16.5523 13 16V12Z" fill="currentColor"></path>
              </svg>
                
                <span class="font-semibold text-black" x-text="bannerTitle"></span><span class="hidden w-px h-4 mx-3 rounded-full sm:block bg-neutral-200"></span>
            </span>
            <span class="block pt-1 pb-2 leading-none sm:inline sm:pt-0 sm:pb-0 text-black" x-text="bannerDescription"></span>
            <button @click="bannerVisible=false" class="flex items-center flex-shrink-0 translate-x-1 ease-out duration-150 justify-center w-6 h-6 p-1.5 text-black rounded-full hover:bg-neutral-100">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-full h-full"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
        </button>
            <!--<a :href="link" target="_blank"><span class="block pt-1 pb-2 leading-none sm:inline sm:pt-0 sm:pb-0 text-red"></span></a>-->
        </div>
    </div>
</div>