ruangrupa/kios-webapp
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display products on dispatch
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
toqvist 2024-04-05 22:38:48 +02:00
parent e0bb3a349d
commit d0a9dd6a13
1 changed files with 38 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
astro/src/components/KiosMap.tsx
View File

@ -270,7 +270,7 @@ export const KiosMap = () => {
<div className='w-full flex justify-center align-middle'> <div className='w-full flex justify-center align-middle'>
{ {
selectedNode.type !== 'none' && ( selectedNode.type !== 'none' && (
<div className='absolute bg-white border-gray-950 border-2 z-[998] left-10 top-1/4 p-4'> <div className='absolute bg-white border-gray-950 border-2 z-[998] left-10 top-1/5 mt-24 p-4'>
<div className='flex gap-8 flex-col'> <div className='flex gap-8 flex-col'>
{selectedMaker !== undefined && ( {selectedMaker !== undefined && (
<div className='flex gap-4 flex-col'> <div className='flex gap-4 flex-col'>
@ -302,13 +302,17 @@ export const KiosMap = () => {
src={product.picture.url} src={product.picture.url}
alt={product.picture.alt || ''} /> alt={product.picture.alt || ''} />
} }
<div className="flex flex-col gap-4 pb-4"> <div className="flex flex-col pb-4">
<h3 className='text-4xl text-black py-2'> <h3 className='text-4xl text-black py-2'>
{product.name} {product.name}
</h3> </h3>
{product.weight &&
<p className='text-black text-lg'
>Weight: {product.weight}</p>
}
<Button <Button
variant={'kios'} variant={'kios'}
className='w-full' className='w-full mt-6'
onClick={() => handleRequestProduct()} onClick={() => handleRequestProduct()}
> >
Request product Request product
@ -337,9 +341,28 @@ export const KiosMap = () => {
</> </>
)} )}
//Todo: Display products
{selectedDispatch !== undefined && ( {selectedDispatch !== undefined && (
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-8'>
<div>
<h2 className='text-xl font-bold underline-offset-2 underline py-2'>
Product{selectedDispatch.products.length > 1 && 's'}
</h2>
{selectedDispatch.products.map((product, i) => {
return (
<div className='flex flex-row items-center gap-4'>
<img
src={product.picture.url}
alt={product.picture.alt}
className='border-2 border-black'
width={60}
/>
<h3 className='font-bold text-xl'>{product.name}</h3>
</div>
)
})}
</div>
<Contacts <Contacts
name={selectedDispatch.maker.name} name={selectedDispatch.maker.name}
email={selectedDispatch.maker.email} email={selectedDispatch.maker.email}