From 2d9f0de756b25a451ffd1e93067ecb1279e118c4 Mon Sep 17 00:00:00 2001
From: Bob <dv4xd@proton.me>
Date: Wed, 17 Jul 2024 00:49:27 +0800
Subject: [PATCH] problem: Products and Purchases element layout is bad

---
 src/components/ProductCard.svelte       |  8 ++-
 src/components/ProductCardFromID.svelte |  4 +-
 src/components/ProductFomo.svelte       |  8 +--
 src/components/ProductPurchases.svelte  | 88 +++++++++++--------------
 4 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/src/components/ProductCard.svelte b/src/components/ProductCard.svelte
index 39c4c7d..91721ec 100644
--- a/src/components/ProductCard.svelte
+++ b/src/components/ProductCard.svelte
@@ -46,13 +46,15 @@
 </script>
 
 {#if validate(product)}
-	<Card.Root class="m-2 w-[350px]">
+	<Card.Root class="m-2 w-[450px]">
 		<Card.Header>
 			<Card.Title>{product.getMatchingTags('name')[0][1]}</Card.Title>
 			<Card.Description>{product.getMatchingTags('description')[0][1]}</Card.Description>
 		</Card.Header>
-		<img src={product.getMatchingTags('cover')[0][1]} />
-		<Card.Content></Card.Content>
+		<img src={product.getMatchingTags('cover')[0][1]} alt="cover" />
+		<Card.Content>
+			<slot />
+		</Card.Content>
 		<Card.Footer class="flex justify-between">
 			{#if !includedInRocket()}
 				<AddProductToRocket {product} {rocket} />
diff --git a/src/components/ProductCardFromID.svelte b/src/components/ProductCardFromID.svelte
index ca0ff5c..9e4e8de 100644
--- a/src/components/ProductCardFromID.svelte
+++ b/src/components/ProductCardFromID.svelte
@@ -17,5 +17,7 @@
 </script>
 
 {#if productEvent}
-	<ProductCard {rocket} product={productEvent} />
+	<ProductCard {rocket} product={productEvent}>
+		<slot />
+	</ProductCard>
 {/if}
diff --git a/src/components/ProductFomo.svelte b/src/components/ProductFomo.svelte
index c7917f7..1e4092e 100644
--- a/src/components/ProductFomo.svelte
+++ b/src/components/ProductFomo.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import * as Card from '$lib/components/ui/card/index.js';
-	import * as Table from '$lib/components/ui/table/index.js';
 	import { RocketProduct } from '@/event_helpers/rockets';
 	import type { NDKEvent } from '@nostr-dev-kit/ndk';
 	import ProductCardFromId from './ProductCardFromID.svelte';
@@ -27,11 +26,10 @@
 		<Card.Title>Products and Purchases</Card.Title>
 		<Card.Description class="grid grid-cols-2">
 			{#each $products as product}
-				<div class=" grid-cols-1">
-					<ProductCardFromId {rocket} productID={product.ID} />
-				</div>
 				<div class="grid-cols-1">
-					<ProductPurchases {rocket} {product} />
+					<ProductCardFromId {rocket} productID={product.ID}>
+						<ProductPurchases {rocket} {product} />
+					</ProductCardFromId>
 				</div>
 			{/each}
 		</Card.Description>
diff --git a/src/components/ProductPurchases.svelte b/src/components/ProductPurchases.svelte
index 5289880..9f82043 100644
--- a/src/components/ProductPurchases.svelte
+++ b/src/components/ProductPurchases.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import * as Card from '@/components/ui/card';
 	import * as Table from '@/components/ui/table';
 	import { ZapPurchase, type RocketProduct } from '@/event_helpers/rockets';
 	import { unixToRelativeTime } from '@/helpers';
@@ -47,51 +46,44 @@
 	//todo: update rocket event with confirmed zaps if we have votepower
 </script>
 
-<Card.Root>
-	<Card.Header class="px-7">
-		<Card.Title>Purchases</Card.Title>
-		<Card.Description
-			>Purchase history for {productEvent?.getMatchingTags('name')[0][1]}</Card.Description
-		>
-	</Card.Header>
-	<Card.Content>
-		<Table.Root>
-			<Table.Header>
-				<Table.Row>
-					<Table.Head>Buyer</Table.Head>
-					<Table.Head class="hidden md:table-cell">Sats Paid</Table.Head>
-					<Table.Head class="text-right"></Table.Head>
-				</Table.Row>
-			</Table.Header>
-			<Table.Body>
-				{#each $purchases as [id, purchase], _ (id)}
-					<Table.Row
-						on:click={() => {
-							console.log(purchase.ZapReceipt.rawEvent());
-						}}
-						class="bg-accent"
+{#if $purchases.size > 0}
+	<div class="pt-2 text-lg font-semibold">Purchases</div>
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head>Buyer</Table.Head>
+				<Table.Head class="hidden md:table-cell">Sats Paid</Table.Head>
+				<Table.Head class="text-right"></Table.Head>
+			</Table.Row>
+		</Table.Header>
+		<Table.Body>
+			{#each $purchases as [id, purchase], _ (id)}
+				<Table.Row
+					on:click={() => {
+						console.log(purchase.ZapReceipt.rawEvent());
+					}}
+					class="bg-accent"
+				>
+					<Table.Cell>
+						<div class="flex flex-nowrap">
+							<Avatar
+								ndk={$ndk}
+								pubkey={purchase.BuyerPubkey}
+								class="h-10 w-10 flex-none rounded-full object-cover"
+							/>
+							<Name
+								ndk={$ndk}
+								pubkey={purchase.BuyerPubkey}
+								class="inline-block max-w-32 truncate p-2"
+							/>
+						</div>
+					</Table.Cell>
+					<Table.Cell class="hidden md:table-cell">{purchase.Amount / 1000}</Table.Cell>
+					<Table.Cell class="text-right"
+						>{unixToRelativeTime(purchase.ZapReceipt.created_at * 1000)}</Table.Cell
 					>
-						<Table.Cell>
-							<div class="flex flex-nowrap">
-								<Avatar
-									ndk={$ndk}
-									pubkey={purchase.BuyerPubkey}
-									class="h-10 w-10 flex-none rounded-full object-cover"
-								/>
-								<Name
-									ndk={$ndk}
-									pubkey={purchase.BuyerPubkey}
-									class="inline-block max-w-32 truncate p-2"
-								/>
-							</div>
-						</Table.Cell>
-						<Table.Cell class="hidden md:table-cell">{purchase.Amount / 1000}</Table.Cell>
-						<Table.Cell class="text-right"
-							>{unixToRelativeTime(purchase.ZapReceipt.created_at * 1000)}</Table.Cell
-						>
-					</Table.Row>
-				{/each}
-			</Table.Body>
-		</Table.Root>
-	</Card.Content>
-</Card.Root>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+{/if}