File size: 1,334 Bytes
5a612e9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | {# Empty State Component
Usage: {% include "components/empty_state.html" with title="Welcome" message="Get started..." cta_url=url('...') cta_label="Create" %}
#}
<div class="flex flex-col items-center justify-center py-20 px-4 text-center animate-fade-in">
<div class="flex h-20 w-20 items-center justify-center rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 shadow-xl shadow-indigo-500/20 mb-8">
<svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h2 class="text-3xl font-bold tracking-tight text-[--foreground] sm:text-4xl mb-4">{{ title }}</h2>
<p class="max-w-md mx-auto text-lg text-[--muted-foreground] mb-10">{{ message }}</p>
{% if cta_url %}
<a href="{{ cta_url }}" class="inline-flex items-center gap-2 rounded-xl bg-indigo-600 px-6 py-3.5 text-base font-semibold text-white shadow-sm hover:bg-indigo-500 transition-all hover:scale-[1.02]">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
{{ cta_label|default('Get Started') }}
</a>
{% endif %}
</div>
|