g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve broadcast dialog and product selector UI

Browse Source 
Enhanced the broadcast dialog with better product selection UX, including a 'Done' button and improved selected products display. Updated the product selector to show more concise product descriptions, adjusted scroll area height, and improved price styling for clarity.
This commit is contained in:
NotII
2025-07-30 16:05:46 +02:00
parent 4d1c37de92
commit 5b78e4f86c
3 changed files with 51 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/modals/product-selector.tsx
View File

@@ -77,7 +77,7 @@ export default function ProductSelector({ selectedProducts, onSelectionChange }:
/>
</div>
<ScrollArea className="h-64">
<ScrollArea className="h-48">
<div className="space-y-2">
{filteredProducts.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
@@ -88,23 +88,28 @@ export default function ProductSelector({ selectedProducts, onSelectionChange }:
filteredProducts.map((product) => (
<div
key={product._id}
className="flex items-center space-x-3 p-3 border rounded-lg hover:bg-muted/50"
className="flex items-start space-x-3 p-3 border rounded-lg hover:bg-muted/50"
>
<Checkbox
checked={selectedProducts.includes(product._id)}
onCheckedChange={() => handleProductToggle(product._id)}
className="mt-0.5"
/>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="flex items-start justify-between gap-2">
<div className="flex-1 min-w-0">
<p className="font-medium truncate">{product.name}</p>
<p className="font-medium text-sm leading-tight mb-1">
{product.name}
</p>
{product.description && (
<p className="text-sm text-muted-foreground truncate">
{product.description}
<p className="text-xs text-muted-foreground leading-tight line-clamp-2">
{product.description.length > 80
? `${product.description.substring(0, 80)}...`
: product.description}
</p>
)}
</div>
<div className="text-sm text-muted-foreground ml-2">
<div className="text-sm font-medium text-green-600 dark:text-green-400 flex-shrink-0">
£{getMinPrice(product).toFixed(2)}
</div>
</div>