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

<div
	class="hidden md:block bg-primary-100 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-900 dark:text-slate-400 font-semibold">NEW</span>
	<a
		href={getPermalink('useful-resources-to-create-websites', 'post')}
		class="hover:underline text-gray-700 dark:text-slate-400"
		>Useful tools and resources to create a professional website »</a
	>
	<a
		target="_blank"
		rel="noopener"
		class="float-right"
		title="If you like AstroWind, give us a star."
		href="https://github.com/onwidget/astrowind"
	>
		<img
			src="https://img.shields.io/github/stars/onwidget/astrowind.svg?style=social&label=Stars&maxAge=86400"
			alt="Follow @onWidget"
			width="84"
			height="20"
		/>
	</a>
</div>
