---
import { getPermalink } from '~/utils/permalinks';
---

<div
	class="hidden md:block bg-primary-50 dark:bg-slate-800 dark:border-slate-800 dark:text-slate-400 border-b border-primary-100 text-sm px-3 py-2 text-gray-800 overflow-hidden whitespace-nowrap text-ellipsis"
>
	<span class="text-xs py-0.5 px-1 bg-primary-200 dark:bg-slate-600 font-semibold">NEW</span>
	<a
		href={getPermalink('get-started-website-with-astro-tailwind-css', 'post')}
		class="underline underline-offset-2 decoration-1 decoration-dotted"
		>Get started with AstroWind to create a website using Astro and Tailwind CSS »</a
	>
	<a
		target="_blank"
		class="float-right"
		title="Follow @onWidget on Twitter"
		href="https://twitter.com/intent/user?screen_name=onwidget"
	>
		<img
			src="https://img.shields.io/twitter/url/https/twitter.com/onwidget.svg?style=social&label=Follow%20%40onWidget"
			alt="Follow @onWidget"
			width="125"
			height="20"
		/>
	</a>
</div>