https://www.drinktrade.com/cdn/shop/t/2106/assets/step-template-re…?v=98001793856499183321789670873

1import{useMemo}from"preact/hooks";import{html}from"htm/preact";import{useStorage}from"onboarding-use-storage";import{ONBOARDING_STORAGE_KEYS}from"onboarding-step-constants";export function App({namespace:e="onboarding"}){const[t]=useStorage(e,ONBOARDING_STORAGE_KEYS.RECOMMENDATIONS_RESULT),l=useMemo((()=>t&&t.queue&&t.queue.slice(0,2)||[]),[t]);return html`
2    <section
3      class="flex flex-col justify-center items-center py-3"
4      style="background-color: #f4eee6;"
5    >
6      <div class="flex gap-3 max-w-full px-12 max-md:px-5 overflow-x-auto pb-6">
7        ${l.map(((e,t)=>html`
8            <article
9              class="flex flex-col rounded min-w-[318px] w-[318px] overflow-hidden"
10            >
11              <div
12                class="flex relative gap-2.5 items-start w-full text-sm leading-none text-white"
13              >
14                <div
15                  class="flex z-0 flex-1 basis-6 bg-neutral h-[396px] min-w-[240px]"
16                ></div>
17                <div
18                  class="flex absolute top-2.5 left-2.5 z-20 gap-2 justify-center items-start px-3 py-2 ${0===t?"bg-[#FF5D39]":"bg-[#446BB0]"} rounded-lg"
19                >
20                  <svg
21                    width="16"
22                    height="16"

23                    viewBox="0 0 16 16"
24                    fill="none"
25                    xmlns="http://www.w3.org/2000/svg"
26                  >
27                    <g id="Check ">
28                      <path
29                        id="Vector (Stroke)"
30                        fill-rule="evenodd"
31                        clip-rule="evenodd"
32                        d="M15.8105 2.8678C16.0676 3.13135 16.0624 3.55343 15.7989 3.81054L5.77666 13.5883C5.51766 13.841 5.10439 13.841 4.84545 13.5882L0.201009 9.05499C-0.0624758 8.79782 -0.0675909 8.37574 0.189585 8.11225C0.44676 7.84877 0.868839 7.84365 1.13232 8.10083L5.31122 12.1796L14.8678 2.85617C15.1313 2.59905 15.5534 2.60426 15.8105 2.8678Z"
33                        fill="white"
34                      ></path>
35                    </g>
36                  </svg>
37                  <span class="font-bold"
38                    >Your${" "}
39                    ${0===t?"First":1===t?"Second":"Third"}${" "}
40                    Coffee</span
41                  >
42                </div>
43                <img
44                  src="${e.imageSrc}&width=600"
45                  alt="Space Cadet"
46                  srcset="
47                    ${e.imageSrc}&width=352 352w,
48                    ${e.imageSrc}&width=600 600w
49                  "
50                  width="600"
51                  height="600"
52                  class="object-cover absolute top-2/4 left-2/4 z-0 rounded -translate-x-2/4 -translate-y-2/4 aspect-[0.67] h-full"
53                />
54              </div>
55              <div
56                class="flex flex-col flex-1 px-4 pt-4 pb-6 w-full bg-white rounded-none text-zinc-900"
57              >
58                <div class="flex flex-col w-full gap-1">
59                  <p class="text-xs leading-[16px] uppercase">
60                    ${e.brand?.name}
61                  </p>
62                  <h2 class="text-lg font-bold leading-[22px]">
63                    ${e.title}
64                  </h2>
65                  <p class="text-sm leading-[18px]">${e.tasteGroup}</p>
66                </div>
67                <p class="mt-4 text-base leading-5"></p>
68                <p>${e.description}</p>
69                <p></p>
70                <a
71                  href="#id=${e.shopifyProductId}"
72                  class="mt-4 text-sm font-bold leading-none underline decoration-auto decoration-solid underline-offset-auto"
73                >
74                  Learn more
75                </a>
76              </div>
77            </article>
78          `))}
79      </div>
80    </section>
81  `}