acinguiux-preact-components 0.0.1

package/src/wcs/shared/promo-with-popup/promo-with-popup.js

@@ -0,0 +1,93 @@
+const ICON_CLOSE = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="19.293 3.293 20.707 4.707 13.414 12 20.707 19.293 19.293 20.707 12 13.414 4.707 20.707 3.293 19.293 10.586 12 3.293 4.707 4.707 3.293 12 10.586"/></svg>')}`
+const ICON_NEXT = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="7.374 4.324 15.219 12.952 7.407 20.773 8.822 22.187 17.981 13.017 8.854 2.979"/></svg>')}`
+const ICON_PREV = `data:image/svg+xml;utf8,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon fill="#595959" points="15.543 4.294 7.699 12.922 15.51 20.743 14.095 22.156 4.937 12.987 14.063 2.949"/></svg>')}`
+
+const { h, matter, preactHooks } = globalThis.ami
+const { useState, useEffect } = preactHooks
+const { Box, Button, Card, Heading, Popup, Table } = matter
+
+export default function PromoWithPopup ({ models, currentModelIndex = 0 }) {
+  const [showPopup, setShowPopup] = useState(false)
+  const [popupModelIndex, setPopupModelIndex] = useState(currentModelIndex)
+
+  // Reset current model index when popup is closed.
+  useEffect(() => {
+    setPopupModelIndex(currentModelIndex)
+  }, [showPopup])
+
+  const model = models[currentModelIndex]
+  const popupModel = models[popupModelIndex]
+
+  return h('div', { role: 'listitem' },
+    h(Card, {
+      _model: { value: '#' },
+      className: 'block bg-bga text-txa rounded-2xl overflow-hidden h-full transition cursor-pointer transition animate-fade',
+      onClick: event => {
+        event.preventDefault()
+        setShowPopup(true)
+      },
+      children: h('div', { className: 'flex flex-col' },
+        h('img', { src: model.image.src, alt: model.image.alt, className: 'w-full h-full block object-cover aspect-video' }),
+        h(Box, { className: 'sm:col-span-1 grow' },
+          h(Heading, { _level: 3 }, model.title),
+          h('p', model.text)
+        )
+      )
+    }),
+    h(Popup, {
+      _show: showPopup,
+      onKeyDown: event => event.key === 'Escape' && setShowPopup(false),
+      _layout: 'toast',
+      children: [
+        h('div', { className: 'flex gap-2' },
+          h('div', { className: 'grow' },
+            h(Heading, { _level: 3 }, popupModel.title)
+          ),
+          h('div', { className: 'grow-0 shrink-0' },
+            h(Button, {
+              _variant: 'plain',
+              _textless: true,
+              _size: 'xs',
+              _model: { name: 'Close', icon: ICON_CLOSE },
+              onClick: () => setShowPopup(false)
+            })
+          )
+        ),
+        h('div', { className: 'grid lg:grid-cols-12 sm:grid-cols-1 gap-5' },
+          h('img', {
+            className: 'lg:col-span-4 w-full rounded-lg object-cover',
+            src: popupModel.image.src,
+            alt: popupModel.image.alt,
+            key: popupModelIndex
+          }),
+          h('div', { className: 'lg:col-span-8' },
+            h(Table,
+              popupModel.links.map(link =>
+                h('tr',
+                  h('th', { className: 'text-right pr-2 w-48' }, link.name),
+                  h('td', { className: 'text-left' }, Array.isArray(link.value) ? link.value.join(', ') : link.value)
+                )
+              )
+            )
+          )
+        ),
+        h('div', { className: 'flex gap-2 justify-end' },
+          h(Button, {
+            disabled: popupModelIndex === 0,
+            _textless: true,
+            _size: 'sm',
+            _model: { name: 'Previous', icon: ICON_PREV },
+            onClick: () => setPopupModelIndex(Math.max(popupModelIndex - 1, 0))
+          }),
+          h(Button, {
+            disabled: popupModelIndex === models.length - 1,
+            _textless: true,
+            _size: 'sm',
+            _model: { name: 'Next', icon: ICON_NEXT },
+            onClick: () => setPopupModelIndex(Math.min(popupModelIndex + 1, models.length - 1))
+          })
+        )
+      ]
+    })
+  )
+}