now the cards look fine
This commit is contained in:
@@ -33,7 +33,7 @@ function formatPrice(cents: number): string {
|
||||
<div
|
||||
v-for="product in products"
|
||||
:key="product.id"
|
||||
class="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
|
||||
class="flex flex-col overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800"
|
||||
>
|
||||
<img
|
||||
v-if="product.image_url"
|
||||
@@ -44,10 +44,15 @@ function formatPrice(cents: number): string {
|
||||
<div v-else class="flex h-48 items-center justify-center bg-gray-100 dark:bg-gray-700">
|
||||
<span class="text-sm text-gray-400">No image</span>
|
||||
</div>
|
||||
<div class="p-5">
|
||||
<div class="flex flex-1 flex-col p-5">
|
||||
<h2 class="mb-1 font-medium capitalize">{{ product.name }}</h2>
|
||||
<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
|
||||
<p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
|
||||
<p class="mb-4 grow text-sm text-gray-500 dark:text-gray-400">{{ product.description }}</p>
|
||||
<div class="flex items-center justify-between">
|
||||
<p class="text-lg font-semibold">{{ formatPrice(product.price_cents) }}</p>
|
||||
<button type="button" class="rounded-md bg-gray-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-gray-700 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-200">
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user