acinguiux-preact-components 0.0.1

package/src/main/organisms/promo-lure.js

@@ -0,0 +1,22 @@
+import { Asset } from '../molecules/asset.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function PromoLure ({ _model, ...props }) {
+  const { title, text, asset } = _model
+  if (!title || !text || !asset.src) {
+    throw new ValidationError()
+  }
+
+  const { _variant } = props
+
+  return h('div', { ...props, className: 'bg-bga text-txa rounded-2xl overflow-hidden lg:grid lg:grid-cols-12 gap-x-5' },
+    h('div', { className: `col-span-8 row-start-1 ${_variant === 'right' ? '' : 'col-start-5'}` },
+      h(Asset, { _model, _tall: true })
+    ),
+    h('div', { className: 'col-span-4 row-start-1' },
+      h(PromoText, { _model })
+    )
+  )
+}

package/src/main/organisms/promo-product-card.js

@@ -0,0 +1,187 @@
+import { useState, useEffect } from 'preact/hooks'
+import { Img } from '../atoms/img.js'
+import { Link } from '../atoms/link.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+const DEFAULT_UNIT = '100 g'
+
+export function PromoProductCard ({ _model, count, ...props }) {
+  const {
+    title,
+    links,
+    image,
+    brand,
+    offerLabel,
+    eta,
+    price,
+    oldPrice,
+    currency = '\u20b9',
+    initialQuantity,
+    maxQuantity
+  } = _model
+
+  if (!title || !image?.src) {
+    throw new ValidationError()
+  }
+
+  const productLink = links?.[0]?.value
+  const units = getUnitOptions(_model)
+  const [selectedUnit, setSelectedUnit] = useState(units[0]?.value || DEFAULT_UNIT)
+
+  // count can be a number (single unit) or an object { "100 gm": 2, "250 gm": 1 } (per-unit from DB)
+  const getCountForUnit = (unit) => {
+    if (count == null) return null
+    if (typeof count === 'object' && !Array.isArray(count)) {
+      const val = count[unit]
+      return val != null ? Math.max(0, Number.parseInt(val, 10) || 0) : 0
+    }
+    return Math.max(0, Number.parseInt(count, 10) || 0)
+  }
+
+  const externalCount = getCountForUnit(selectedUnit)
+  const [quantity, setQuantity] = useState(Math.max(0, externalCount ?? (Number.parseInt(initialQuantity ?? 0, 10) || 0)))
+
+  // Sync quantity when count prop changes OR when selectedUnit changes
+  useEffect(() => {
+    const unitCount = getCountForUnit(selectedUnit)
+    if (unitCount != null) setQuantity(unitCount)
+  }, [count, selectedUnit])
+
+  const maxQty = Number.parseInt(maxQuantity, 10)
+  const unitId = `promo-product-unit-${slugify(title)}`
+
+  const onDecrease = () => setQuantity(current => Math.max(0, current - 1))
+  const onIncrease = () => {
+    setQuantity(current => {
+      if (Number.isFinite(maxQty) && current >= maxQty) {
+        return current
+      }
+
+      return current + 1
+    })
+  }
+
+  const etaLabel = eta || '12 mins'
+  const addLabel = 'Add'
+
+  return h('article', {
+    ...props,
+    className: 'bg-bga text-txa border border-txa/20 rounded-xl sm:p-2 md:p-2.5 lg:p-3 w-full shadow-sm sm:space-y-1 md:space-y-1.5 lg:space-y-2',
+    'data-product-id': _model.id || slugify(title),
+    'data-quantity': quantity,
+    'data-selected-unit': selectedUnit
+  },
+  h('div', { className: 'relative rounded-lg border border-txa/15 overflow-hidden bg-bgb/10' },
+    h(Link, {
+      _model: { value: productLink, name: title },
+      target: '_blank',
+      className: 'block'
+    },
+    h(Img, {
+      _model: image,
+      _fit: 'contain',
+      className: 'w-full bg-bga',
+      style: 'aspect-ratio: 1 / 1;'
+    })
+    ),
+    offerLabel && h('div', { className: 'absolute top-1 left-1 lg:top-2 lg:left-2 bg-bgb text-txb rounded-sm px-1 lg:px-2 py-0.5 text-[10px] lg:text-xs font-bold' }, offerLabel)
+  ),
+
+  h('div', { className: 'inline-flex items-center rounded-sm bg-txa/10 text-txa/80 px-1 lg:px-2 py-0.5 lg:py-1 text-[10px] lg:text-xs font-semibold uppercase' }, etaLabel),
+
+  h('div', { className: 'space-y-0.5 lg:space-y-1 sm:min-h-8 lg:min-h-14' },
+    brand && h('div', { className: 'text-[10px] lg:text-xs font-bold uppercase opacity-80' }, brand),
+    h(Link, {
+      _model: { value: productLink, name: title },
+      target: '_blank',
+      className: 'block font-semibold leading-tight sm:text-xs lg:text-sm'
+    },
+    title
+    )
+  ),
+
+  h('div', { className: 'flex items-center gap-1 lg:gap-2' },
+    h('label', { className: 'sr-only', for: unitId }, 'Unit selector'),
+    h('select', {
+      id: unitId,
+      value: selectedUnit,
+      onChange (event) {
+        setSelectedUnit(event.currentTarget.value)
+      },
+      className: 'w-full rounded-md border border-txa/30 bg-bga text-txa px-1 lg:px-2 py-0.5 lg:py-1 text-[10px] lg:text-sm'
+    }, units.map(option => h('option', { value: option.value }, option.label)))
+  ),
+
+  h('div', { className: 'flex items-end justify-between gap-1 lg:gap-2' },
+    h('div', { className: 'flex items-center gap-1 lg:gap-2' },
+      h('span', { className: 'sm:text-xs lg:text-base font-bold' }, formatPrice(price, currency)),
+      oldPrice && h('span', { className: 'sm:text-[10px] lg:text-sm line-through opacity-60' }, formatPrice(oldPrice, currency))
+    ),
+
+    quantity === 0
+      ? h('button', {
+        type: 'button',
+        className: 'clickable inline-flex items-center gap-0.5 lg:gap-1 rounded-md border border-bgb bg-bgb text-txb px-2 lg:px-3 py-1 lg:py-1.5 text-xs lg:text-sm font-bold transition hover:bg-txb hover:text-bgb',
+        onClick: onIncrease,
+        'aria-label': 'Add item'
+      },
+      h('span', { 'aria-hidden': true }, '+'),
+      addLabel
+      )
+      : h('div', {
+        className: 'inline-flex items-center rounded-md border border-bgb overflow-hidden',
+        role: 'group',
+        'aria-label': 'Quantity selector'
+      },
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb sm:w-6 sm:h-6 lg:w-8 lg:h-8 text-sm lg:text-lg leading-none font-bold',
+        onClick: onDecrease,
+        'aria-label': 'Decrease quantity'
+      }, '-'),
+      h('span', { className: 'px-2 lg:px-3 min-w-6 lg:min-w-8 text-center text-xs lg:text-base font-semibold' }, quantity),
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb sm:w-6 sm:h-6 lg:w-8 lg:h-8 text-sm lg:text-lg leading-none font-bold',
+        onClick: onIncrease,
+        'aria-label': 'Increase quantity'
+      }, '+')
+      )
+  )
+  )
+}
+
+function getUnitOptions (model) {
+  const raw = model.units || model.sizes || model.options || model.tags?.map(tag => tag.value)
+
+  if (!Array.isArray(raw) || raw.length === 0) {
+    return [{ label: model.unit || DEFAULT_UNIT, value: model.unit || DEFAULT_UNIT }]
+  }
+
+  return raw.map((option, index) => {
+    if (typeof option === 'string') {
+      return { label: option, value: option }
+    }
+
+    const label = option?.name || option?.label || option?.value || `${DEFAULT_UNIT}-${index + 1}`
+    const value = option?.value || label
+    return { label, value }
+  })
+}
+
+function formatPrice (value, currency) {
+  if (typeof value === 'number') {
+    return `${currency}${value.toFixed(2)}`
+  }
+
+  if (typeof value === 'string' && value.length > 0) {
+    return value
+  }
+
+  return `${currency}0.00`
+}
+
+function slugify (value) {
+  return String(value || 'item').toLowerCase().replaceAll(/[^a-z0-9]+/g, '-').replaceAll(/(^-|-$)/g, '')
+}

package/src/main/organisms/promo-product-full.js

@@ -0,0 +1,293 @@
+import { useState } from 'preact/hooks'
+import { Img } from '../atoms/img.js'
+import { Link } from '../atoms/link.js'
+import { Popup } from '../atoms/popup.js'
+import { Button } from '../atoms/button.js'
+import { Carousel } from './carousel.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+import { NAVIGATION_CLOSE } from '../shared/icons.js'
+
+const DEFAULT_UNIT = '100 g'
+
+export function PromoProductFull ({ _model, ...props }) {
+  const {
+    title,
+    links,
+    image,
+    images = [],
+    brand,
+    offerLabel,
+    eta,
+    price,
+    oldPrice,
+    currency = '\u20b9',
+    initialQuantity,
+    maxQuantity,
+    description
+  } = _model
+
+  if (!title || !image?.src) {
+    throw new ValidationError()
+  }
+
+  const productLink = links?.[0]?.value
+  const allImages = images.length > 0 ? images : [image]
+  const units = getUnitOptions(_model)
+  const [selectedUnit, setSelectedUnit] = useState(units[0]?.value || DEFAULT_UNIT)
+  const [quantity, setQuantity] = useState(Math.max(0, Number.parseInt(initialQuantity ?? 0, 10) || 0))
+  const [showDetail, setShowDetail] = useState(false)
+  const maxQty = Number.parseInt(maxQuantity, 10)
+  const unitId = `promo-full-unit-${slugify(title)}`
+
+  const onDecrease = () => setQuantity(current => Math.max(0, current - 1))
+  const onIncrease = () => {
+    setQuantity(current => {
+      if (Number.isFinite(maxQty) && current >= maxQty) return current
+      return current + 1
+    })
+  }
+
+  const etaLabel = eta || '12 mins'
+
+  return h('article', {
+    ...props,
+    className: 'bg-bga text-txa border border-txa/20 rounded-xl p-3 lg:p-4 w-full shadow-sm space-y-2 lg:space-y-3'
+  },
+
+  // Image carousel (clickable to open detail)
+  h('div', {
+    className: 'relative rounded-lg border border-txa/15 overflow-hidden bg-bgb/10 cursor-pointer',
+    onClick: () => setShowDetail(true),
+    role: 'button',
+    'aria-label': 'View product details'
+  },
+    allImages.length > 1
+      ? h(Carousel, { dots: true, ariaLabel: `${title} images` },
+        allImages.map((img, idx) =>
+          h('div', { key: idx, className: 'w-full' },
+            h(Img, {
+              _model: img,
+              _fit: 'contain',
+              className: 'w-full bg-bga',
+              style: 'aspect-ratio: 1 / 1;'
+            })
+          )
+        )
+      )
+      : h(Img, {
+        _model: image,
+        _fit: 'contain',
+        className: 'w-full bg-bga',
+        style: 'aspect-ratio: 1 / 1;'
+      }),
+    offerLabel && h('div', { className: 'absolute top-2 left-2 bg-bgb text-txb rounded-sm px-2 py-0.5 text-xs font-bold z-10' }, offerLabel)
+  ),
+
+  // ETA badge
+  h('div', { className: 'inline-flex items-center rounded-sm bg-txa/10 text-txa/80 px-2 py-1 text-xs font-semibold uppercase' }, etaLabel),
+
+  // Product info
+  h('div', { className: 'space-y-1 min-h-14' },
+    brand && h('div', { className: 'text-xs font-bold uppercase opacity-80' }, brand),
+    h(Link, {
+      _model: { value: productLink, name: title },
+      target: '_blank',
+      className: 'block text-sm lg:text-base font-semibold leading-tight'
+    }, title),
+    description && h('p', { className: 'text-xs text-txa/70 leading-relaxed line-clamp-2 mt-1' }, description)
+  ),
+
+  // Unit selector
+  h('div', { className: 'flex items-center gap-2' },
+    h('label', { className: 'sr-only', for: unitId }, 'Unit selector'),
+    h('select', {
+      id: unitId,
+      value: selectedUnit,
+      onChange (event) { setSelectedUnit(event.currentTarget.value) },
+      className: 'w-full rounded-md border border-txa/30 bg-bga text-txa px-2 py-1 text-sm'
+    }, units.map(option => h('option', { value: option.value }, option.label)))
+  ),
+
+  // Price + quantity controls
+  h('div', { className: 'flex items-end justify-between gap-2' },
+    h('div', { className: 'flex items-center gap-2' },
+      h('span', { className: 'text-base lg:text-lg font-bold' }, formatPrice(price, currency)),
+      oldPrice && h('span', { className: 'text-sm line-through opacity-60' }, formatPrice(oldPrice, currency))
+    ),
+
+    quantity === 0
+      ? h('button', {
+        type: 'button',
+        className: 'clickable inline-flex items-center gap-1 rounded-md border border-bgb bg-bgb text-txb px-3 py-1.5 text-sm font-bold transition hover:bg-txb hover:text-bgb',
+        onClick: onIncrease,
+        'aria-label': 'Add item'
+      },
+      h('span', { 'aria-hidden': true }, '+'),
+      'Add'
+      )
+      : h('div', {
+        className: 'inline-flex items-center rounded-md border border-bgb overflow-hidden',
+        role: 'group',
+        'aria-label': 'Quantity selector'
+      },
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb w-8 h-8 text-lg leading-none font-bold',
+        onClick: onDecrease,
+        'aria-label': 'Decrease quantity'
+      }, '\u2212'),
+      h('span', { className: 'px-3 min-w-8 text-center font-semibold' }, quantity),
+      h('button', {
+        type: 'button',
+        className: 'clickable bg-bgb text-txb w-8 h-8 text-lg leading-none font-bold',
+        onClick: onIncrease,
+        'aria-label': 'Increase quantity'
+      }, '+')
+      )
+  ),
+
+  // Detail popup (image gallery + full description)
+  h(Popup, {
+    _layout: 'full',
+    'aria-label': `${title} details`,
+    _show: showDetail,
+    onKeyDown (event) {
+      if (event.key === 'Escape') {
+        event.preventDefault()
+        setShowDetail(false)
+      }
+    }
+  },
+  h('div', { className: 'flex flex-col h-full bg-bga text-txa' },
+
+    // Header with close
+    h('div', { className: 'flex justify-between items-center p-4 border-b border-txa/10' },
+      h('h2', { className: 'text-lg font-bold' }, title),
+      h(Button, {
+        onClick: () => setShowDetail(false),
+        _textless: true,
+        _model: { name: 'Close', icon: NAVIGATION_CLOSE }
+      })
+    ),
+
+    // Content
+    h('div', { className: 'flex-1 overflow-y-auto p-4 lg:p-6' },
+      h('div', { className: 'grid sm:grid-cols-1 lg:grid-cols-2 gap-6' },
+
+        // Image gallery / carousel
+        h('div', { className: 'space-y-3' },
+          h(Carousel, { dots: true, ariaLabel: `${title} gallery` },
+            allImages.map((img, idx) =>
+              h('div', { key: idx, className: 'w-full' },
+                h(Img, {
+                  _model: img,
+                  _fit: 'contain',
+                  className: 'w-full bg-bga rounded-lg',
+                  style: 'aspect-ratio: 1 / 1;'
+                })
+              )
+            )
+          ),
+          // Thumbnails
+          allImages.length > 1 && h('div', { className: 'flex gap-2 overflow-x-auto' },
+            allImages.map((img, idx) =>
+              h('div', { key: idx, className: 'shrink-0 w-14 h-14 lg:w-16 lg:h-16 rounded-md border border-txa/10 overflow-hidden cursor-pointer' },
+                h(Img, { _model: img, _fit: 'contain', className: 'w-full h-full object-contain' })
+              )
+            )
+          )
+        ),
+
+        // Product details
+        h('div', { className: 'space-y-4' },
+          brand && h('div', { className: 'text-xs font-bold uppercase opacity-70' }, brand),
+          h('h3', { className: 'text-xl font-bold' }, title),
+
+          h('div', { className: 'flex items-center gap-3' },
+            h('span', { className: 'text-2xl font-bold' }, formatPrice(price, currency)),
+            oldPrice && h('span', { className: 'text-lg line-through opacity-50' }, formatPrice(oldPrice, currency)),
+            offerLabel && h('span', { className: 'bg-bgb text-txb rounded-sm px-2 py-0.5 text-xs font-bold' }, offerLabel)
+          ),
+
+          h('div', { className: 'flex items-center gap-2' },
+            h('span', { className: 'inline-flex items-center rounded-sm bg-txa/10 px-2 py-1 text-xs font-semibold uppercase' }, etaLabel)
+          ),
+
+          // Unit selector in detail
+          h('div', { className: 'max-w-xs' },
+            h('label', { className: 'block text-xs font-semibold text-txa/70 mb-1' }, 'Select size'),
+            h('select', {
+              value: selectedUnit,
+              onChange (event) { setSelectedUnit(event.currentTarget.value) },
+              className: 'w-full rounded-md border border-txa/30 bg-bga text-txa px-3 py-2 text-sm'
+            }, units.map(option => h('option', { value: option.value }, option.label)))
+          ),
+
+          // Description
+          description && h('div', { className: 'space-y-2' },
+            h('h4', { className: 'text-sm font-bold' }, 'Description'),
+            h('p', { className: 'text-sm text-txa/80 leading-relaxed whitespace-pre-line' }, description)
+          ),
+
+          // Add to cart in detail view
+          h('div', { className: 'pt-3' },
+            quantity === 0
+              ? h('button', {
+                type: 'button',
+                className: 'clickable inline-flex items-center gap-2 rounded-md bg-bgb text-txb px-5 py-2.5 text-sm font-bold hover:bg-txb hover:text-bgb transition',
+                onClick: onIncrease,
+                'aria-label': 'Add item'
+              }, '+ Add to Cart')
+              : h('div', {
+                className: 'inline-flex items-center rounded-md border border-bgb overflow-hidden',
+                role: 'group',
+                'aria-label': 'Quantity selector'
+              },
+              h('button', {
+                type: 'button',
+                className: 'clickable bg-bgb text-txb w-10 h-10 text-xl font-bold',
+                onClick: onDecrease,
+                'aria-label': 'Decrease quantity'
+              }, '\u2212'),
+              h('span', { className: 'px-4 min-w-10 text-center text-base font-semibold' }, quantity),
+              h('button', {
+                type: 'button',
+                className: 'clickable bg-bgb text-txb w-10 h-10 text-xl font-bold',
+                onClick: onIncrease,
+                'aria-label': 'Increase quantity'
+              }, '+')
+              )
+          )
+        )
+      )
+    )
+  )
+  )
+  )
+}
+
+function getUnitOptions (model) {
+  const raw = model.units || model.sizes || model.options || model.tags?.map(tag => tag.value)
+
+  if (!Array.isArray(raw) || raw.length === 0) {
+    return [{ label: model.unit || DEFAULT_UNIT, value: model.unit || DEFAULT_UNIT }]
+  }
+
+  return raw.map((option, index) => {
+    if (typeof option === 'string') return { label: option, value: option }
+    const label = option?.name || option?.label || option?.value || `${DEFAULT_UNIT}-${index + 1}`
+    const value = option?.value || label
+    return { label, value }
+  })
+}
+
+function formatPrice (value, currency) {
+  if (typeof value === 'number') return `${currency}${value.toFixed(2)}`
+  if (typeof value === 'string' && value.length > 0) return value
+  return `${currency}0.00`
+}
+
+function slugify (value) {
+  return String(value || 'item').toLowerCase().replaceAll(/[^a-z0-9]+/g, '-').replaceAll(/(^-|-$)/g, '')
+}

package/src/main/organisms/promo-simple.js

@@ -0,0 +1,23 @@
+import { Asset } from '../molecules/asset.js'
+import { PromoText } from '../molecules/promo-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function PromoSimple ({ _model, ...props }) {
+  const { title, text, links, asset } = _model
+  if (!title && !text && links.length === 0) {
+    throw new ValidationError()
+  }
+
+  const titleOnly = !text && links.length === 0
+  const titleSize = asset.src ? '2xl' : '4xl'
+
+  return h('div', { ...props, className: 'bg-bga text-txa h-full rounded-2xl overflow-hidden' },
+    asset.src && h('div',
+      h(Asset, { _model })
+    ),
+    titleOnly
+      ? h('p', { className: `p-6 font-custom font-bold text-txc text-${titleSize}` }, title)
+      : h(PromoText, { _model })
+  )
+}

package/src/main/organisms/quote.js

@@ -0,0 +1,21 @@
+import { RichText } from '../atoms/rich-text.js'
+import { ValidationError } from '../routing/error-handler.js'
+import h from '../shared/h.js'
+
+export function Quote ({ _model, _variant, ...props }) {
+  const { title, text } = _model
+  if (!title || !text) {
+    throw new ValidationError()
+  }
+
+  const sizes = { small: 3, medium: 7, large: 8 }
+  const textSize = sizes[_variant] || sizes.medium
+
+  return h('blockquote', { ...props, className: 'space-y-5 p-6 bg-bga text-txa h-full rounded-2xl' },
+    h('div', {
+      className: `font-custom text-${textSize}xl`,
+      children: h(RichText, text)
+    }),
+    h('cite', { className: 'block' }, title)
+  )
+}

package/src/main/organisms/search-form.js

@@ -0,0 +1,42 @@
+import { Box } from '../atoms/box.js'
+import { Button } from '../atoms/button.js'
+import { Form } from '../atoms/form.js'
+import { Input } from '../atoms/input.js'
+import h from '../shared/h.js'
+import { NAVIGATION_SEARCH } from '../shared/icons.js'
+import t from '../shared/t.js'
+
+export function SearchForm ({ _model, ...props }) {
+  const { links } = _model
+  const search = links?.[1] || { name: '', value: null }
+  const count = search.value
+  const title = t('Enter your search term')
+
+  return h(Box, { ...props, className: 'rounded-2xl text-txa bg-bga' },
+    h(Form, { name: t('Search'), action: '?', role: 'search' },
+      h('div', { className: 'flex space-x-5' },
+        h('div', { className: 'grow' },
+          h(Input, {
+            type: 'search',
+            name: 'q',
+            value: new URLSearchParams(globalThis.location.search)?.get?.('q'),
+            placeholder: links?.[0]?.name,
+            title,
+            'data-label': title
+          })
+        ),
+        h('div', { className: 'grow-0' },
+          h(Button, {
+            _textless: true,
+            _model: {
+              name: t('Submit'),
+              icon: NAVIGATION_SEARCH
+            },
+            type: 'submit'
+          })
+        )
+      )
+    ),
+    count && h('p', t('{0} results found', count))
+  )
+}

package/src/main/organisms/search-nav.js

@@ -0,0 +1,66 @@
+import { Link } from '../atoms/link.js'
+import h from '../shared/h.js'
+import { ARROW_BACK, ARROW_NEXT } from '../shared/icons.js'
+import t from '../shared/t.js'
+import { Icon } from '../atoms/icon.js'
+
+const REACH = 4
+
+export function SearchNav ({ _model, ...props }) {
+  const { links } = _model
+
+  // Do not render if no selected link.
+  const selectedIndex = links.findIndex(l => l.selected) || 0
+
+  // Get base indexes.
+  let startIndex = selectedIndex - REACH
+  let endIndex = selectedIndex + REACH + 1
+
+  // Offset
+  endIndex -= Math.min(0, startIndex)
+  startIndex += Math.min(0, links.length - endIndex)
+
+  // Cap
+  startIndex = Math.max(startIndex, 0)
+  endIndex = Math.min(endIndex, links.length)
+
+  const items = links.slice(startIndex, endIndex).map(link => h('li',
+    h(Link, {
+      _model: link,
+      _variant: link.selected ? 'bold' : 'simple',
+      children: h('div', { className: 'w-6 text-center' }, link.name)
+    })
+  ))
+
+  const prev = links[selectedIndex - 1]
+  items.unshift(h('li', { className: prev ? null : 'opacity-50' },
+    h(Link, {
+      'aria-label': prev?.value && t('Previous'),
+      _variant: prev ? 'simple' : null,
+      _model: { value: prev?.value, icon: ARROW_BACK },
+      children: h('div', { className: 'flex items-center justify-center min-w-6' },
+        h(Icon, { _size: 'sm' }, ARROW_BACK),
+        h('div', { className: 'sm:hidden md:hidden ms-1 me-3' }, t('Previous'))
+      )
+    })
+  ))
+
+  const next = links[selectedIndex + 1]
+  items.push(h('li', { className: next ? null : 'opacity-50' },
+    h(Link, {
+      'aria-label': next?.value && t('Next'),
+      _variant: next ? 'simple' : null,
+      _model: { value: next?.value, icon: ARROW_NEXT },
+      children: h('div', { className: 'flex items-center justify-center min-w-6' },
+        h('div', { className: 'sm:hidden md:hidden ms-3 me-1' }, t('Next')),
+        h(Icon, { _size: 'sm' }, ARROW_NEXT)
+      )
+    })
+  ))
+
+  return h('ol', {
+    ...props,
+    className: 'w-full p-8 flex flex-wrap justify-center items-center bg-bga text-txa rounded-2xl',
+    children: items
+  })
+}