orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/products/ProductCardActions.README.md

@@ -0,0 +1,84 @@
+# ProductCardActions
+
+## English
+
+Offers the actions allowed by the current product status and stock.
+`productId` identifies the product in `collection` (`products` by default or
+`featured`). A published product with stock can be added to the cart; the
+displayed quantity comes from `cart_counts.modal_quantity`. Decreasing one
+item to zero sends `onRemove` with the product ID and `cart_counts.cart_id`.
+Other quantity changes send `onAdd` with the requested total quantity, bounded
+by `c_real_left`. Unavailable stock can offer subscription and, when configured
+and accepted by the seller, preorder. The seller permission is
+`product.seller.is_accepting_preorders`. When a product from a
+`products_search` response has no such value, the products store takes it from
+the matching seller in `selects.sellers`; a value already on the product is
+kept. The callbacks request an application action; the store's later response
+supplies the updated display.
+
+If the product needs an additional variant choice, `onRequestVariants` fires
+before an add, subscribe or preorder action. Set `variantSelectionResolved`
+after that choice has been made. `disabled` prevents actions. `iconOnly`
+uses compact controls; `label` and `quantityLabel` replace the relevant
+localized captions.
+
+### Props
+
+| Prop                                                                             | Meaning                                                                                                              |
+| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| `productId: number`                                                              | ID of the product handled by ProductCardActions.                                                                     |
+| `collection?: OrionplaceProductCollection`                                       | Product-store collection used to resolve the supplied product ID.                                                    |
+| `label?: string`                                                                 | Visible or accessible name for the component’s main control or region.                                               |
+| `quantityLabel?: string`                                                         | Visible or accessible label for quantity.                                                                            |
+| `iconOnly?: boolean`                                                             | Shows the action as an icon with an accessible label.                                                                |
+| `disabled?: boolean`                                                             | Disables the component controls and prevents new actions.                                                            |
+| `variantSelectionResolved?: boolean`                                             | Confirms that every required product variant has been selected.                                                      |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
+| `onRequestVariants?: () => void`                                                 | Requests secondary-variant selection before a purchase, availability notification or preorder when no secondary variant has been resolved. The application opens the choice; there are no arguments. |
+| `className?: string`                                                             | Additional CSS class for the component root.                                                                         |
+
+## Русский
+
+Показывает действия, доступные для текущего статуса и остатка товара.
+`productId` задаёт товар в `collection` (`products` по умолчанию или
+`featured`). Опубликованный товар с остатком можно добавить в корзину;
+текущее количество берётся из `cart_counts.modal_quantity`. При уменьшении
+количества с одного до нуля `onRemove` получает ID товара и
+`cart_counts.cart_id`. Остальные изменения вызывают `onAdd` с желаемым
+общим количеством, не превышающим `c_real_left`. При отсутствии товара
+может быть доступна подписка на поступление или предзаказ, если его разрешают
+настройки и продавец. Разрешение продавца хранится в
+`product.seller.is_accepting_preorders`. Если у товара из ответа
+`products_search` этого значения нет, хранилище товаров берёт его у
+соответствующего продавца из `selects.sellers`; значение, уже указанное у
+товара, сохраняется. Обработчики запускают действие магазина; после ответа
+API обновлённый товар определяет вид кнопок.
+
+Если перед действием нужно выбрать дополнительный вариант товара,
+срабатывает `onRequestVariants`. После выбора установите
+`variantSelectionResolved`. `disabled` запрещает действия. `iconOnly`
+показывает компактные кнопки; `label` и `quantityLabel` заменяют
+соответствующие локализованные подписи.
+
+### Свойства
+
+| Свойство                                                                         | Назначение                                                                                                         |
+| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| `productId: number`                                                              | ID товара, с которым работает ProductCardActions.                                                                  |
+| `collection?: OrionplaceProductCollection`                                       | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
+| `label?: string`                                                                 | Видимое или доступное название основного элемента компонента.                                                      |
+| `quantityLabel?: string`                                                         | Видимая или доступная подпись для количества.                                                                      |
+| `iconOnly?: boolean`                                                             | Показывает действие как значок с доступным названием.                                                              |
+| `disabled?: boolean`                                                             | Блокирует элементы компонента и новые действия.                                                                    |
+| `variantSelectionResolved?: boolean`                                             | Подтверждает выбор всех обязательных вариантов товара.                                                             |
+| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
+| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
+| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
+| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
+| `onPreorder?: (selection: ProductActionSelection) => void`                       | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |
+| `onRequestVariants?: () => void`                                                 | Запрашивает выбор дополнительного варианта перед покупкой, подпиской на наличие или предзаказом, если он ещё не выбран. Приложение открывает выбор; аргументов нет. |
+| `className?: string`                                                             | Дополнительный CSS-класс корневого элемента.                                                                       |

package/templates/components/orionplace/products/ProductCardActions.module.css

@@ -0,0 +1,146 @@
+.actions {
+  min-width: 0;
+}
+.full {
+  display: grid;
+  gap: 8px;
+}
+.iconOnly {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: end;
+  justify-content: end;
+  gap: 4px;
+}
+.actionButton {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  min-width: 0;
+  width: 100%;
+  height: 44px;
+  padding: 1px 24px;
+  border: 1px solid var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+  font: inherit;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+}
+.actionButton:focus-visible {
+  opacity: 0.85;
+}
+@media (hover: hover) {
+  .actionButton:hover {
+    opacity: 0.85;
+  }
+}
+.actionButton:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.iconOnly .actionButton {
+  width: 36px;
+  height: 36px;
+  flex-shrink: 0;
+  padding: 0;
+}
+.quantity {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  height: 44px;
+  overflow: hidden;
+  border: 1px solid var(--orionplace-text);
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+}
+.iconOnly .quantity {
+  height: 36px;
+  border-color: var(--orionplace-surface);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+.quantity button {
+  display: grid;
+  place-items: center;
+  width: 44px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 16px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+/* The − glyph is the button's text, as in the other packages; only the
+   count between the buttons has its own size and weight. */
+.quantity button span {
+  font: inherit;
+}
+.iconOnly .quantity button {
+  width: 36px;
+}
+.quantity button:focus-visible {
+  opacity: 0.7;
+}
+@media (hover: hover) {
+  .quantity button:hover {
+    opacity: 0.7;
+  }
+}
+.quantity button:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+.quantity span {
+  display: grid;
+  place-items: center;
+  min-width: 24px;
+  padding: 0 4px;
+  font-size: 14px;
+  line-height: calc(20 / 14);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+.unavailable {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 11px;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.full .actionButton {
+  line-height: 16px;
+}
+
+.iconOnly .actionButton {
+  font: revert;
+  border-color: var(--orionplace-surface);
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.iconOnly .actionButton:disabled {
+  color: var(--orionplace-inverse-muted);
+  opacity: 1;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/templates/components/orionplace/products/ProductCardActions.tsx

@@ -0,0 +1,311 @@
+'use client';
+
+import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
+import {
+  useOrionplaceProducts,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
+import { productAvailability } from '@/lib/orionplace/productAvailability';
+import { productLabels } from '@/lib/orionplace/productLabels';
+import styles from './ProductCardActions.module.css';
+
+export interface ProductActionSelection {
+  product: number;
+}
+
+export interface ProductCardActionsProps {
+  productId: number;
+  collection?: OrionplaceProductCollection;
+  label?: string;
+  quantityLabel?: string;
+  iconOnly?: boolean;
+  disabled?: boolean;
+  variantSelectionResolved?: boolean;
+  onAdd?: (selection: ProductActionSelection & { quantity: number }) => void;
+  onRemove?: (selection: ProductActionSelection & { cartItem: number }) => void;
+  onSubscribe?: (selection: ProductActionSelection) => void;
+  onUnsubscribe?: (selection: ProductActionSelection) => void;
+  onPreorder?: (selection: ProductActionSelection) => void;
+  onRequestVariants?: () => void;
+  className?: string;
+}
+
+export function ProductCardActions({
+  productId,
+  collection = 'products',
+  label,
+  quantityLabel,
+  iconOnly = false,
+  disabled = false,
+  variantSelectionResolved = false,
+  onAdd,
+  onRemove,
+  onSubscribe,
+  onUnsubscribe,
+  onPreorder,
+  onRequestVariants,
+  className = '',
+}: ProductCardActionsProps) {
+  const product           = useOrionplaceProduct(productId, collection);
+  const allowPreorder     = useOrionplaceProducts(
+    (state) => state.init?.variables?.allow_preorder,
+  );
+  const localeCode        = useOrionplaceSelections((state) => state.localeCode);
+  if (!product) {
+    return null;
+  }
+
+  const copy              = productLabels(localeCode);
+  const availability      = productAvailability(product, allowPreorder);
+  const storedQuantity    = product.cart_counts?.modal_quantity;
+  const quantity          =
+    Number.isInteger(storedQuantity) && Number(storedQuantity) > 0
+      ? Number(storedQuantity)
+      : 0;
+  const cartItem          = product.cart_counts?.cart_id;
+  const canIncrease       =
+    availability.canAdd && quantity < availability.maxQuantity;
+  const canDecrease       =
+    quantity === 1
+      ? Number.isInteger(cartItem) && Number(cartItem) > 0
+      : availability.canAdd &&
+        quantity > 1 &&
+        quantity - 1 <= availability.maxQuantity;
+  const subscriptionLabel = availability.isSubscribed
+    ? copy.unsubscribe
+    : copy.subscribe;
+  const subscriptionHint  = availability.isSubscribed
+    ? copy.unsubscribeHint
+    : copy.subscribeHint;
+
+  function needsVariantSelection() {
+    if (
+      !variantSelectionResolved &&
+      product?.variants.main_variant?.second_exists
+    ) {
+      onRequestVariants?.();
+      return true;
+    }
+    return false;
+  }
+
+  function add(requestedQuantity: number) {
+    if (
+      disabled ||
+      !availability.canAdd ||
+      !Number.isInteger(requestedQuantity) ||
+      requestedQuantity < 1 ||
+      requestedQuantity > availability.maxQuantity
+    ) {
+      return;
+    }
+    if (requestedQuantity > quantity && needsVariantSelection()) {
+      return;
+    }
+    onAdd?.({ product: product!.id, quantity: requestedQuantity });
+  }
+
+  function decrease() {
+    if (disabled || !canDecrease) {
+      return;
+    }
+    if (quantity === 1) {
+      onRemove?.({ product: product!.id, cartItem: Number(cartItem) });
+      return;
+    }
+    add(quantity - 1);
+  }
+
+  function subscription() {
+    if (disabled || !availability.canSubscribe) {
+      return;
+    }
+    const selection = { product: product!.id };
+    if (availability.isSubscribed) {
+      onUnsubscribe?.(selection);
+    } else if (!needsVariantSelection()) {
+      onSubscribe?.(selection);
+    }
+  }
+
+  function preorder() {
+    if (!disabled && availability.canPreorder && !needsVariantSelection()) {
+      onPreorder?.({ product: product!.id });
+    }
+  }
+
+  return (
+    <div
+      className={[
+        styles.actions,
+        iconOnly ? styles.iconOnly : styles.full,
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      data-product-part="ProductCardActions"
+      data-product-actions
+    >
+      {quantity > 0 && availability.canAdd ? (
+        <div
+          role="group"
+          aria-label={quantityLabel || copy.quantity}
+          className={styles.quantity}
+          data-product-quantity
+        >
+          <button
+            type="button"
+            disabled={disabled || !canDecrease}
+            aria-label={quantity === 1 ? copy.remove : copy.decrease}
+            data-product-decrease
+            onClick={decrease}
+          >
+            {quantity === 1 ? (
+              <svg
+                viewBox="0 0 24 24"
+                width="16"
+                height="16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                aria-hidden="true"
+              >
+                <path d="M4 7h16M9 7V4h6v3M6 7l1 14h10l1-14M10 10v8m4-8v8" />
+              </svg>
+            ) : (
+              <span aria-hidden="true">−</span>
+            )}
+          </button>
+          <span
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            {quantity}
+          </span>
+          <button
+            type="button"
+            disabled={disabled || !canIncrease}
+            aria-label={copy.increase}
+            data-product-increase
+            onClick={() => add(quantity + 1)}
+          >
+            +
+          </button>
+        </div>
+      ) : availability.canAdd ? (
+        <button
+          type="button"
+          disabled={disabled}
+          title={iconOnly ? label || copy.addHint : undefined}
+          aria-label={label || copy.addHint}
+          className={styles.actionButton}
+          data-product-add
+          onClick={() => add(1)}
+        >
+          {iconOnly ? (
+            <svg
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M3 4h2l3 12h11l2-8H6" />
+              <circle
+                cx="9"
+                cy="20"
+                r="1"
+              />
+              <circle
+                cx="18"
+                cy="20"
+                r="1"
+              />
+            </svg>
+          ) : null}
+          <span className={iconOnly ? styles.screenReaderOnly : undefined}>
+            {label || copy.add}
+          </span>
+        </button>
+      ) : null}
+      {availability.canSubscribe && (
+        <button
+          type="button"
+          disabled={disabled}
+          title={iconOnly ? subscriptionHint : undefined}
+          aria-label={subscriptionHint}
+          className={styles.actionButton}
+          data-product-subscription
+          onClick={subscription}
+        >
+          {iconOnly ? (
+            <svg
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M6 9a6 6 0 0 1 12 0v6l2 3H4l2-3V9m4 12h4" />
+              {availability.isSubscribed ? <path d="m3 3 18 18" /> : null}
+            </svg>
+          ) : null}
+          <span className={iconOnly ? styles.screenReaderOnly : undefined}>
+            {subscriptionLabel}
+          </span>
+        </button>
+      )}
+      {availability.canPreorder && (
+        <button
+          type="button"
+          disabled={disabled}
+          title={iconOnly ? copy.preorder : undefined}
+          aria-label={copy.preorder}
+          className={styles.actionButton}
+          data-product-preorder
+          onClick={preorder}
+        >
+          {iconOnly ? (
+            <svg
+              viewBox="0 0 24 24"
+              width="16"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.75"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <circle
+                cx="12"
+                cy="12"
+                r="9"
+              />
+              <path d="M12 7v5l3 2" />
+            </svg>
+          ) : null}
+          <span className={iconOnly ? styles.screenReaderOnly : undefined}>
+            {copy.preorder}
+          </span>
+        </button>
+      )}
+      {!availability.canAdd &&
+        !availability.canSubscribe &&
+        !availability.canPreorder && (
+          <p className={styles.unavailable}>
+            {product.status.status_display || copy.unavailable}
+          </p>
+        )}
+    </div>
+  );
+}

package/templates/components/orionplace/products/ProductCardBadges.README.md

@@ -0,0 +1,44 @@
+# ProductCardBadges
+
+## English
+
+Shows the product's New, Popular, Offer and Low stock badges when their
+respective flags are set. `productId` identifies the product;
+`collection` defaults to `products` and can be `featured`. Each label
+defaults to the selected language. `newLabel`, `popularLabel`, `dealLabel`
+and `lowStockLabel` replace individual labels; passing an empty string
+hides that badge. `className` adds presentation classes.
+
+### Props
+
+| Prop                                       | Meaning                                                           |
+| ------------------------------------------ | ----------------------------------------------------------------- |
+| `productId: number`                        | ID of the product handled by ProductCardBadges.                   |
+| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID. |
+| `newLabel?: string`                        | Visible or accessible label for new.                              |
+| `popularLabel?: string`                    | Visible or accessible label for popular.                          |
+| `dealLabel?: string`                       | Visible or accessible label for deal.                             |
+| `lowStockLabel?: string`                   | Visible or accessible label for low stock.                        |
+| `className?: string`                       | Additional CSS class for the component root.                      |
+
+## Русский
+
+Показывает отметки «Новинка», «Хит», «Выгодно» и «Заканчивается», если
+у товара установлены соответствующие признаки. `productId` задаёт товар;
+`collection` по умолчанию равно `products`, для подборки используйте
+`featured`. Подписи берутся для выбранного языка. `newLabel`,
+`popularLabel`, `dealLabel` и `lowStockLabel` заменяют отдельные подписи;
+пустая строка скрывает соответствующую отметку. `className` добавляет
+классы оформления.
+
+### Свойства
+
+| Свойство                                   | Назначение                                                              |
+| ------------------------------------------ | ----------------------------------------------------------------------- |
+| `productId: number`                        | ID товара, с которым работает ProductCardBadges.                        |
+| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
+| `newLabel?: string`                        | Видимая или доступная подпись для нового товара.                        |
+| `popularLabel?: string`                    | Видимая или доступная подпись для популярного товара.                   |
+| `dealLabel?: string`                       | Видимая или доступная подпись для выгодного предложения.                |
+| `lowStockLabel?: string`                   | Видимая или доступная подпись для малого остатка.                       |
+| `className?: string`                       | Дополнительный CSS-класс корневого элемента.                            |

package/templates/components/orionplace/products/ProductCardBadges.module.css

@@ -0,0 +1,15 @@
+.badges { display: flex; flex-wrap: wrap; align-items: start; gap: 4px; }
+.badge {
+  padding: 2px 8px;
+  background: var(--orionplace-inverse-surface);
+  color: var(--orionplace-inverse-text);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.accent {
+  background: var(--orionplace-danger);
+  color: var(--orionplace-surface);
+}

package/templates/components/orionplace/products/ProductCardBadges.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
+import { productLabels } from '@/lib/orionplace/productLabels';
+import styles from './ProductCardBadges.module.css';
+
+export interface ProductCardBadgesProps {
+  productId: number;
+  collection?: OrionplaceProductCollection;
+  newLabel?: string;
+  popularLabel?: string;
+  dealLabel?: string;
+  lowStockLabel?: string;
+  className?: string;
+}
+
+export function ProductCardBadges({
+  productId,
+  collection = 'products',
+  newLabel,
+  popularLabel,
+  dealLabel,
+  lowStockLabel,
+  className = '',
+}: ProductCardBadgesProps) {
+  const product = useOrionplaceProduct(productId, collection);
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  const flags = product?.flags;
+  const copy = productLabels(localeCode);
+  const badges = [
+    {
+      key: 'new',
+      shown: flags?.flag_is_new,
+      label: newLabel ?? copy.badgeNew,
+      accent: false,
+    },
+    {
+      key: 'popular',
+      shown: flags?.flag_is_popular,
+      label: popularLabel ?? copy.badgePopular,
+      accent: false,
+    },
+    {
+      key: 'deal',
+      shown: flags?.flag_is_good_deal,
+      label: dealLabel ?? copy.badgeDeal,
+      accent: true,
+    },
+    {
+      key: 'low-stock',
+      shown: flags?.flag_is_soon_be_out,
+      label: lowStockLabel ?? copy.badgeLowStock,
+      accent: true,
+    },
+  ].filter((badge) => badge.shown && badge.label);
+
+  if (badges.length === 0) {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${styles.badges} ${className}`.trim()}
+      data-product-part="ProductCardBadges"
+    >
+      {badges.map((badge) => (
+        <span
+          key={badge.key}
+          className={`${styles.badge} ${badge.accent ? styles.accent : ''}`.trim()}
+        >
+          {badge.label}
+        </span>
+      ))}
+    </div>
+  );
+}