75 lines
2.7 KiB
Plaintext
75 lines
2.7 KiB
Plaintext
<div class="max-w-6xl mx-auto p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-4xl font-bold text-primary">Generated Labels</h1>
|
|
<a href={~p"/"} class="text-primary hover:underline">← Back to Home</a>
|
|
</div>
|
|
|
|
<%= if Enum.empty?(@labels) do %>
|
|
<div class="text-center py-12">
|
|
<p class="text-xl text-gray-600 dark:text-gray-400 mb-4">
|
|
No labels generated yet.
|
|
</p>
|
|
<a
|
|
href={~p"/"}
|
|
class="inline-block bg-primary text-fg-light px-4 py-2 rounded hover:bg-highlight focus:ring-fg-light"
|
|
>
|
|
Create Your First Label
|
|
</a>
|
|
</div>
|
|
<% else %>
|
|
<div class="mb-4 text-gray-600 dark:text-gray-400">
|
|
Total labels: <%= length(@labels) %>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<%= for label <- @labels do %>
|
|
<div class="border border-gray-300 dark:border-gray-600 rounded-lg p-4 bg-secondary-light dark:bg-secondary-dark">
|
|
<div class="mb-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded flex items-center justify-center p-4 min-h-[150px]">
|
|
<img
|
|
src={label.url}
|
|
alt="Label image"
|
|
class="max-w-full max-h-[200px] object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600 dark:text-gray-400">Size:</span>
|
|
<span class="font-medium text-fg-light dark:text-fg-dark">
|
|
<%= format_size(label.size) %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex justify-between">
|
|
<span class="text-gray-600 dark:text-gray-400">Modified:</span>
|
|
<span class="font-medium text-fg-light dark:text-fg-dark text-xs">
|
|
<%= format_datetime(label.modified) %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="pt-2 flex gap-2">
|
|
<a
|
|
href={label.url}
|
|
target="_blank"
|
|
class="flex-1 text-center bg-primary text-fg-light px-3 py-2 rounded text-sm hover:bg-highlight"
|
|
>
|
|
View Full Size
|
|
</a>
|
|
</div>
|
|
|
|
<div class="pt-1">
|
|
<input
|
|
type="text"
|
|
readonly
|
|
value={label.url}
|
|
class="w-full text-xs px-2 py-1 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 text-fg-light dark:text-fg-dark"
|
|
onclick="this.select()"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|