39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import type { FC } from 'react'
|
|
import { BottomDialog, p as P } from 'web-components'
|
|
import type { IdName } from '@packages/shared'
|
|
|
|
type VendorSnippetProduct = IdName
|
|
|
|
interface ProductListDialogProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
products: VendorSnippetProduct[]
|
|
}
|
|
|
|
export const ProductListDialog: FC<ProductListDialogProps> = ({
|
|
open,
|
|
onClose,
|
|
products,
|
|
}) => {
|
|
return (
|
|
<BottomDialog open={open} onClose={onClose}>
|
|
<div className="pt-4 pb-8">
|
|
<P className="text-lg font-bold mb-4 text-slate-900 block">
|
|
Products ({products.length})
|
|
</P>
|
|
<div className="overflow-auto" style={{ maxHeight: 400 }}>
|
|
{products.map((product, index) => (
|
|
<div
|
|
key={product.id}
|
|
className={`py-3 border-b border-slate-100 ${index === products.length - 1 ? 'border-b-0' : ''}`}
|
|
>
|
|
<P className="text-sm text-slate-800 font-medium">
|
|
{product.name}
|
|
</P>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</BottomDialog>
|
|
)
|
|
}
|