Tab Content Product UoM Convertion
unknown
javascript
a year ago
10 kB
9
Indexable
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl p-1">
<Tab
key="product"
className={({ selected }) =>
classNames(
'text[#2F2F2F] mx-0 w-full rounded border-l-white border-r-white border-t-white py-2.5 text-sm font-medium leading-5',
selected
? 'border-4 border-b-[#5E5EEA] font-medium'
: 'border-2 border-b-[#CBD0E0] text-[#8C8CA6]'
)
}
>
Product
</Tab>
<Tab
key="conversion"
className={({ selected }) =>
classNames(
'text[#2F2F2F] mx-0 w-full rounded border-l-white border-r-white border-t-white py-2.5 text-sm font-medium leading-5',
selected
? 'border-4 border-b-[#5E5EEA] font-medium'
: 'border-2 border-b-[#CBD0E0] text-[#8C8CA6]'
)
}
>
Conversion
</Tab>
</Tab.List>
<Tab.Panels className="p-0">
<Tab.Panel key="product">
<div className="mt-[20px] flex flex-col space-y-1">
{productCategory?.length &&
productCategory.map((product, index) => {
console.log('product productCategory', product)
return (
<div key={index}>
<div className="text-[12px] font-bold">
{product.hasProductName}
</div>
<Listbox
value={selectedValues}
onChange={(value, index) =>
handleChangeProductUom(
product.id,
product.hasProductName,
value
)
}
>
<div className="relative py-2">
<Listbox.Button className="relative w-full cursor-default rounded-lg border-[1px] border-[#CBD0E0] bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus-visible:border-indigo-500 focus-visible:ring-2 focus-visible:ring-white/75 focus-visible:ring-offset-2 focus-visible:ring-offset-orange-300 sm:text-sm">
<span className="block truncate">
{selectedValues
? selectedValues
: '- Select UoM -'}
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<svg
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.04142 7.76651L9.92892 4.87901C9.98273 4.8233 10.0471 4.77886 10.1183 4.74829C10.1894 4.71771 10.266 4.70162 10.3434 4.70095C10.4209 4.70028 10.4977 4.71504 10.5694 4.74437C10.6411 4.7737 10.7062 4.81701 10.761 4.87178C10.8158 4.92655 10.8591 4.99168 10.8884 5.06337C10.9177 5.13506 10.9325 5.21188 10.9318 5.28933C10.9311 5.36678 10.915 5.44333 10.8845 5.5145C10.8539 5.58567 10.8095 5.65004 10.7538 5.70385L7.45383 9.00376C7.34444 9.11312 7.1961 9.17455 7.04142 9.17455C6.88674 9.17455 6.73839 9.11312 6.629 9.00376L3.32909 5.70385C3.27337 5.65004 3.22893 5.58567 3.19836 5.5145C3.16779 5.44333 3.1517 5.36678 3.15102 5.28933C3.15035 5.21188 3.16511 5.13506 3.19444 5.06337C3.22377 4.99168 3.26708 4.92655 3.32185 4.87178C3.37663 4.81701 3.44176 4.7737 3.51345 4.74437C3.58513 4.71504 3.66195 4.70028 3.7394 4.70095C3.81686 4.70162 3.8934 4.71771 3.96457 4.74829C4.03574 4.77886 4.10011 4.8233 4.15392 4.87901L7.04142 7.76651Z"
fill="#8C8CA6"
/>
</svg>
</span>
</Listbox.Button>
<Transition
as={Fragment}
leave="transition ease-in duration-100"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<Listbox.Options className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm">
{product.hasUoms.map((uom, personIdx) => (
<Listbox.Option
key={personIdx}
className={({ active }) =>
`relative cursor-default select-none py-2 pl-10 pr-4 ${
active
? 'bg-[#CBD0E0] text-black'
: 'text-black'
}`
}
value={uom}
>
{({ selected }) => (
<>
<span
className={`block truncate ${
selected
? 'font-medium'
: 'font-normal'
}`}
>
{uom}
</span>
</>
)}
</Listbox.Option>
))}
</Listbox.Options>
</Transition>
</div>
</Listbox>
</div>
)
})}
</div>
</Tab.Panel>
<Tab.Panel key="conversion">
<button
key="1"
className="unit-button group mb-2 flex flex w-full justify-between gap-[7px] rounded-lg border border-[#CBD0E0] p-[10px] text-left"
type="button"
onClick={() => showModalConvertion()}
>
<span>1 bbl = 158,987 liter</span>
<span>
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5971 8.65034L7.32498 13.9225L6.98023 15.0985L8.13232 14.7654L13.422 9.47576L12.5971 8.65034ZM13.4966 7.75084L14.3215 8.57568L15.0903 7.80684C15.145 7.75215 15.1757 7.67798 15.1757 7.60064C15.1757 7.5233 15.145 7.44912 15.0903 7.39443L14.6773 6.98201C14.6226 6.92733 14.5484 6.89662 14.4711 6.89662C14.3938 6.89662 14.3196 6.92733 14.2649 6.98201L13.4972 7.75084H13.4966ZM15.5027 6.15718L15.9151 6.56959C16.1885 6.84307 16.3421 7.21394 16.3421 7.60064C16.3421 7.98733 16.1885 8.3582 15.9151 8.63168L8.74482 15.8026L6.28315 16.5143C6.18281 16.5432 6.07654 16.5447 5.97544 16.5185C5.87434 16.4923 5.78212 16.4395 5.7084 16.3656C5.63468 16.2916 5.58216 16.1992 5.55633 16.098C5.5305 15.9969 5.53231 15.8906 5.56157 15.7903L6.28957 13.3083L13.4412 6.15659C13.7147 5.8832 14.0856 5.72961 14.4723 5.72961C14.859 5.72961 15.2298 5.8832 15.5033 6.15659L15.5027 6.15718Z"
fill="#5E5EEA"
/>
</svg>
</span>
</button>
<button
key="2"
className="unit-button group mb-2 flex flex w-full justify-between gap-[7px] rounded-lg border border-[#CBD0E0] p-[10px] text-left"
type="button"
// onClick={() => handleSelectUnit(item, item.data.num)}
>
<span>1 bbl = 123,456 liter</span>
<span>
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5971 8.65034L7.32498 13.9225L6.98023 15.0985L8.13232 14.7654L13.422 9.47576L12.5971 8.65034ZM13.4966 7.75084L14.3215 8.57568L15.0903 7.80684C15.145 7.75215 15.1757 7.67798 15.1757 7.60064C15.1757 7.5233 15.145 7.44912 15.0903 7.39443L14.6773 6.98201C14.6226 6.92733 14.5484 6.89662 14.4711 6.89662C14.3938 6.89662 14.3196 6.92733 14.2649 6.98201L13.4972 7.75084H13.4966ZM15.5027 6.15718L15.9151 6.56959C16.1885 6.84307 16.3421 7.21394 16.3421 7.60064C16.3421 7.98733 16.1885 8.3582 15.9151 8.63168L8.74482 15.8026L6.28315 16.5143C6.18281 16.5432 6.07654 16.5447 5.97544 16.5185C5.87434 16.4923 5.78212 16.4395 5.7084 16.3656C5.63468 16.2916 5.58216 16.1992 5.55633 16.098C5.5305 15.9969 5.53231 15.8906 5.56157 15.7903L6.28957 13.3083L13.4412 6.15659C13.7147 5.8832 14.0856 5.72961 14.4723 5.72961C14.859 5.72961 15.2298 5.8832 15.5033 6.15659L15.5027 6.15718Z"
fill="#5E5EEA"
/>
</svg>
</span>
</button>
<button
key="1"
className="unit-button group mb-2 flex flex w-full justify-between gap-[7px] rounded-lg border border-[#CBD0E0] p-[10px] text-left"
type="button"
// onClick={() => handleSelectUnit(item, item.data.num)}
>
<span>1 bbl = 234,567 liter</span>
<span>
<svg
width="22"
height="22"
viewBox="0 0 22 22"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.5971 8.65034L7.32498 13.9225L6.98023 15.0985L8.13232 14.7654L13.422 9.47576L12.5971 8.65034ZM13.4966 7.75084L14.3215 8.57568L15.0903 7.80684C15.145 7.75215 15.1757 7.67798 15.1757 7.60064C15.1757 7.5233 15.145 7.44912 15.0903 7.39443L14.6773 6.98201C14.6226 6.92733 14.5484 6.89662 14.4711 6.89662C14.3938 6.89662 14.3196 6.92733 14.2649 6.98201L13.4972 7.75084H13.4966ZM15.5027 6.15718L15.9151 6.56959C16.1885 6.84307 16.3421 7.21394 16.3421 7.60064C16.3421 7.98733 16.1885 8.3582 15.9151 8.63168L8.74482 15.8026L6.28315 16.5143C6.18281 16.5432 6.07654 16.5447 5.97544 16.5185C5.87434 16.4923 5.78212 16.4395 5.7084 16.3656C5.63468 16.2916 5.58216 16.1992 5.55633 16.098C5.5305 15.9969 5.53231 15.8906 5.56157 15.7903L6.28957 13.3083L13.4412 6.15659C13.7147 5.8832 14.0856 5.72961 14.4723 5.72961C14.859 5.72961 15.2298 5.8832 15.5033 6.15659L15.5027 6.15718Z"
fill="#5E5EEA"
/>
</svg>
</span>
</button>
</Tab.Panel>
</Tab.Panels>
</Tab.Group>Editor is loading...
Leave a Comment