New sections

components/cards/IconCard.tsx

@@ -0,0 +1,88 @@
+import Icon, { AvailableIcons } from "$store/components/ui/Icon.tsx";
+import { clx } from "$store/sdk/clx.ts";
+import {
+  borderColorClasses2,
+  BorderColors,
+  BorderRadius,
+  borderRadiusClasses,
+  BorderWidth,
+  borderWidthClasses,
+  colorClasses,
+  Colors,
+  flex,
+} from "../../constants.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+
+export interface Bg {
+  bgColor?: Colors;
+  bgImage?: ImageWidget;
+}
+
+export interface Props {
+  label: string;
+  icon: AvailableIcons;
+  description: string;
+  layout?: {
+    iconPosition?: "Top" | "Left";
+  };
+  style?: {
+    background?: Bg;
+    border?: {
+      width?: BorderWidth;
+      color?: BorderColors;
+      radius?: BorderRadius;
+    };
+  };
+}
+
+export default function Card({
+  icon = "Deco",
+  label = "Item",
+  description = "A text describing this item",
+  layout,
+  style,
+}: Props) {
+  const bgColor = style?.background?.bgColor || "Primary";
+
+  const hasPadding = (bgColor && bgColor !== "Transparent") ||
+    (style?.border?.width && style.border.width !== "None");
+
+  return (
+    <div
+      class={clx(
+        "flex gap-3",
+        layout?.iconPosition === "Left" ? "flex-row" : "flex-col",
+        bgColor && colorClasses[bgColor],
+        hasPadding && "p-4 lg:p-8",
+        style?.border?.color && borderColorClasses2[style.border.color],
+        style?.border?.width && borderWidthClasses[style.border.width],
+        style?.border?.radius && borderRadiusClasses[style.border.radius],
+        style?.background?.bgImage ? "bg-cover bg-center" : "",
+      )}
+      style={{
+        "background-image": style?.background?.bgImage
+          ? `url(${style?.background?.bgImage})`
+          : "",
+      }}
+    >
+      <div class="flex-none">
+        <Icon
+          id={icon}
+          width={36}
+          height={36}
+          strokeWidth={0.01}
+          fill="currentColor"
+          class="text-primary-content"
+        />
+      </div>
+      <div class="flex-auto flex flex-col gap-1 lg:gap-2">
+        <div class="text-base lg:text-xl leading-7">
+          {label}
+        </div>
+        <p class="text-sm leading-5">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+}

components/cards/IconCardsCarousel.tsx

@@ -0,0 +1,22 @@
+import Card, { Props as CardProps } from "$store/components/cards/IconCard.tsx";
+import Carousel, {
+  Props as CarouselProps,
+} from "$store/components/layout/Carousel.tsx";
+
+export interface Props {
+  placeholderItems?: number;
+  items?: CardProps[];
+  slider?: CarouselProps;
+}
+
+export default function Section({ placeholderItems, items, slider }: Props) {
+  const ITEMS: CardProps[] = new Array(placeholderItems || 10).fill({});
+  const allItems = !items || items?.length === 0 ? ITEMS : items;
+
+  return (
+    <Carousel
+      {...slider}
+      children={allItems.map((item) => <Card {...item} />)}
+    />
+  );
+}

components/cards/ImageCard.tsx

@@ -0,0 +1,110 @@
+import { ButtonType, getButtonClasses } from "../../constants.tsx";
+import type { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+
+interface Style {
+  /** @description In px */
+  width?: number;
+  textPosition?: "Top" | "Bottom";
+  textAlignment?: "Center" | "Left";
+  button?: ButtonType;
+}
+
+/** @titleBy label */
+export interface Props {
+  image?: ImageWidget;
+  label: string;
+  description?: string;
+  tag?: string;
+  href?: string;
+  buttonText?: string;
+  style?: Style;
+}
+
+function CardText({
+  label = "Item",
+  description = "A text describing this item",
+  tag = "Tag",
+  alignment,
+}: {
+  label?: string;
+  description?: string;
+  tag?: string;
+  alignment?: "Center" | "Left";
+}) {
+  return (
+    <div
+      class={`flex flex-col ${
+        !alignment || alignment === "Center" ? "items-center" : "items-start"
+      }`}
+    >
+      {tag && (
+        <div class="text-xs bg-primary text-primary-content py-1 px-2 rounded mb-2">
+          {tag}
+        </div>
+      )}
+      {label && <h3 class="text-xl">{label}</h3>}
+      {description && <div class="text-sm">{description}</div>}
+    </div>
+  );
+}
+
+function Card(
+  {
+    href,
+    tag,
+    label,
+    description,
+    buttonText = "Button",
+    style,
+    image =
+      "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/2753/b2278d2d-2270-482b-98d4-f09d5f05ba97",
+  }: Props,
+) {
+  const position = style?.textPosition === "Bottom" ? "Bottom" : "Top";
+  const alignment = style?.textAlignment === "Left" ? "Left" : "Center";
+  return (
+    <div
+      class="flex flex-col gap-4 justify-center"
+      style={{ width: style?.width || "auto" }}
+    >
+      <a href={href} class="flex flex-col gap-4 lg:w-full w-full lg:h-auto">
+        {position === "Top" && (
+          <CardText
+            tag={tag}
+            label={label}
+            description={description}
+            alignment={alignment}
+          />
+        )}
+        {image && (
+          <figure>
+            <Image
+              class="card"
+              src={image}
+              alt={description || label || tag}
+              width={160}
+              height={195}
+              loading="lazy"
+            />
+          </figure>
+        )}
+        {position === "Bottom" && (
+          <CardText
+            tag={tag}
+            label={label}
+            description={description}
+            alignment={alignment}
+          />
+        )}
+      </a>
+      {buttonText && (
+        <a href={href} class={getButtonClasses(style?.button || {})}>
+          {buttonText}
+        </a>
+      )}
+    </div>
+  );
+}
+
+export default Card;

components/cards/ImageCardsCarousel.tsx

@@ -0,0 +1,21 @@
+import Card, { Props as CardProps } from "../../components/cards/ImageCard.tsx";
+import Carousel, { Props as CarouselProps } from "../layout/Carousel.tsx";
+
+export interface Props {
+  placeholderItems?: number;
+  items?: CardProps[];
+  slider?: CarouselProps;
+}
+
+export default function Section({ placeholderItems, items, slider }: Props) {
+  const ITEMS: CardProps[] = new Array(placeholderItems || 10).fill({});
+  const allItems = !items || items?.length === 0 ? ITEMS : items;
+
+  return (
+    <Carousel
+      layout={{ itemWidth: 200 }}
+      {...slider}
+      children={allItems.map((item) => <Card {...item} />)}
+    />
+  );
+}

components/layout/Carousel.tsx

@@ -0,0 +1,132 @@
+import Icon from "$store/components/ui/Icon.tsx";
+import Slider from "$store/components/ui/Slider.tsx";
+import SliderJS from "$store/islands/SliderJS.tsx";
+import { clx } from "$store/sdk/clx.ts";
+import type { Section } from "deco/blocks/section.ts";
+import { ComponentChildren, toChildArray } from "preact";
+import { useId } from "preact/hooks";
+import { buttonClasses, ButtonColor, grid } from "../../constants.tsx";
+
+interface Layout {
+  /** @description For desktop in px. */
+  itemWidth?: number;
+  gap?: {
+    /** @default 2 */
+    mobile?: "1" | "2" | "4" | "8" | "12" | "16";
+    /** @default 4 */
+    desktop?: "1" | "2" | "4" | "8" | "12" | "16";
+  };
+  hide?: {
+    controls?: boolean;
+    indicators?: boolean;
+  };
+}
+
+/**
+ * @title Carousel
+ */
+export interface Props {
+  children?: ComponentChildren;
+  /** @description For automatic sliding in seconds. */
+  interval?: number;
+  layout?: Layout;
+  style?: {
+    controlsColor?: ButtonColor;
+    controlsOutline?: boolean;
+  };
+}
+
+function Section({ interval = 0, layout, style, children }: Props) {
+  const id = useId();
+  const items = toChildArray(children);
+
+  if (!items.length) {
+    return null;
+  }
+
+  const controlClx = clx(
+    buttonClasses[style?.controlsColor || "Default"],
+    style?.controlsOutline && "btn-outline",
+  );
+
+  return (
+    <>
+      <div
+        id={id}
+        class={clx(
+          "grid grid-rows-[1fr_48px_1fr_40px]",
+          !layout?.hide?.controls
+            ? "grid-cols-[48px_1fr_48px] sm:grid-cols-[48px_1fr_48px]"
+            : "grid-cols-[0_1fr_0]",
+        )}
+      >
+        <Slider
+          class={clx(
+            "relative carousel carousel-center col-start-2 col-end-2 row-start-1 row-end-4",
+            layout?.gap?.mobile
+              ? grid.gap.mobile[layout.gap.mobile]
+              : grid.gap.mobile[2],
+            layout?.gap?.desktop
+              ? grid.gap.desktop[layout.gap.desktop]
+              : grid.gap.mobile[4],
+          )}
+        >
+          {items?.map((item, index) => (
+            <Slider.Item
+              index={index}
+              class="carousel-item"
+              style={{ width: layout?.itemWidth || "auto" }}
+            >
+              {item}
+            </Slider.Item>
+          ))}
+        </Slider>
+
+        {!layout?.hide?.controls && (
+          <>
+            <div class="flex items-center justify-start z-10 col-start-1 row-start-2">
+              <Slider.PrevButton
+                class={clx(controlClx, "btn btn-circle btn-sm")}
+              >
+                <Icon
+                  class="text-base-content"
+                  size={24}
+                  id="ChevronLeft"
+                  strokeWidth={3}
+                />
+              </Slider.PrevButton>
+            </div>
+            <div class="flex items-center justify-end z-10 col-start-3 row-start-2">
+              <Slider.NextButton
+                class={clx(controlClx, "btn btn-circle btn-sm")}
+              >
+                <Icon
+                  class="text-base-content"
+                  size={24}
+                  id="ChevronRight"
+                  strokeWidth={3}
+                />
+              </Slider.NextButton>
+            </div>
+          </>
+        )}
+
+        {!layout?.hide?.indicators && (
+          <ul class="carousel items-end justify-center col-span-full gap-4 z-10 row-start-4">
+            {items?.map((_, index) => (
+              <li class="carousel-item">
+                <Slider.Dot index={index}>
+                  <div class="w-4 h-4 rounded-full group-disabled:bg-primary bg-transparent border-[1px] border-primary" />
+                </Slider.Dot>
+              </li>
+            ))}
+          </ul>
+        )}
+
+        <SliderJS rootId={id} interval={interval && interval * 1e3} infinite />
+      </div>
+    </>
+  );
+}
+
+export default Section;

components/minicart/vtex/Cart.tsx

@@ -5,7 +5,8 @@ function Cart() {
   const { cart, loading, updateItems, addCouponsToCart } = useCart();
   const { items, totalizers } = cart.value ?? { items: [] };
   const total = totalizers?.find((item) => item.id === "Items")?.value || 0;
-  const discounts = (totalizers?.find((item) => item.id === "Discounts")?.value || 0) * -1;
+  const discounts =
+    (totalizers?.find((item) => item.id === "Discounts")?.value || 0) * -1;
   const locale = cart.value?.clientPreferencesData.locale ?? "pt-BR";
   const currency = cart.value?.storePreferencesData.currencyCode ?? "BRL";
   const coupon = cart.value?.marketingData?.coupon ?? undefined;
@@ -31,8 +32,7 @@ function Cart() {
       coupon={coupon}
       onAddCoupon={(text) => addCouponsToCart({ text })}
       onUpdateQuantity={(quantity, index) =>
-        updateItems({ orderItems: [{ index, quantity }] })
-      }
+        updateItems({ orderItems: [{ index, quantity }] })}
       itemToAnalyticsItem={(index) => {
         const item = items[index];