{% macro badge(text, completed) %}
	<span class="px-3 py-1 rounded-full text-xs font-bold uppercase {{ completed ? 'bg-green-500 text-white' : 'bg-gray-500 text-gray-200' }}">
		{{ text }}
	</span>
{% endmacro %}

{% macro filter_button(filter, label) %}
	<button @click="filter = '{{filter}}'" :class="filter === '{{filter}}' ? 'border-b-2 border-primary'
		   : ''" class="uppercase text-xs tracking-widest p-2">{{label}}</button>
{% endmacro %}

{% macro intro(text) %}
	<section class="container mx-auto px-4 py-16 md:py-24">
		<div class="max-w-3xl mx-auto text-center">
			<p class="font-body text-stone-600 text-lg leading-relaxed">{{ text }}</p>
		</div>
	</section>
{% endmacro %}