29 lines
1.0 KiB
Plaintext
29 lines
1.0 KiB
Plaintext
component ProductGrid {
|
|
props {
|
|
title = ""
|
|
description = ""
|
|
empty = false
|
|
emptyText = "No items available."
|
|
class = ""
|
|
}
|
|
|
|
view {
|
|
<section class="px-4 py-10 sm:px-6 sm:py-12 lg:px-8 lg:py-14 {class}">
|
|
<div class="mx-auto w-full max-w-7xl">
|
|
{#if title}<h2 class="m-0 text-3xl font-semibold tracking-[-0.035em] text-[var(--wire-color-text,#0f172a)]">{title}</h2>{/if}
|
|
{#if description}<p class="mt-4 max-w-3xl leading-7 text-[var(--wire-color-muted,#64748b)]">{description}</p>{/if}
|
|
|
|
{#if empty}
|
|
<div class="mt-8 rounded-2xl border border-dashed border-[var(--wire-color-border,#e2e8f0)] bg-[var(--wire-color-surface-2,#f8fafc)] p-10 text-center text-[var(--wire-color-muted,#64748b)]">
|
|
{emptyText}
|
|
</div>
|
|
{:else}
|
|
<div class="mt-8 grid grid-cols-1 items-stretch gap-6 md:grid-cols-2 xl:grid-cols-3 xl:gap-7 [&>*]:min-w-0 [&>*]:h-full">
|
|
<slot />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</section>
|
|
}
|
|
}
|