orionplace-react 0.7.7 → 0.8.0

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

@@ -1,84 +0,0 @@
-# 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

@@ -1,146 +0,0 @@
-.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

@@ -1,311 +0,0 @@
-'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

@@ -1,44 +0,0 @@
-# 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

@@ -1,15 +0,0 @@
-.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

@@ -1,78 +0,0 @@
-'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>
-  );
-}