@vendure-platform/create 0.5.0 → 1.0.0-major.202609091053.0.0

package/dist/assets/storefront/src/components/commerce/instant-search-dropdown.tsx

@@ -1,13 +1,13 @@
 'use client';
 
-import { useState, useEffect, useRef, useCallback, useTransition } from 'react';
-import { useLocale, useTranslations } from 'next-intl';
 import { useRouter } from '@/i18n/navigation';
-import { Search, Clock, ArrowRight, Package, FolderOpen, X } from 'lucide-react';
-import Image from 'next/image';
-import { instantSearch, type InstantSearchResult } from '@/lib/vendure/instant-search-action';
-import { useRecentSearches } from '@/lib/use-recent-searches';
 import { formatPrice } from '@/lib/format';
+import { useRecentSearches } from '@/lib/use-recent-searches';
+import { instantSearch, type InstantSearchResult } from '@/lib/vendure/instant-search-action';
+import { ArrowRight, Clock, FolderOpen, Package, Search, X } from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useCallback, useEffect, useRef, useState, useTransition } from 'react';
 
 interface InstantSearchDropdownProps {
     inputRef: React.RefObject<HTMLInputElement | null>;
@@ -84,248 +84,276 @@ export function InstantSearchDropdown({
 
     const handleFocus = useCallback(() => setIsOpen(true), []);
 
-    const navigateToItem = useCallback((item: NavItem) => {
-        setIsOpen(false);
-        if (item.type === 'product') {
-            addSearch(searchValue.trim());
-            router.push(`/product/${item.slug}`);
-        } else if (item.type === 'collection') {
-            addSearch(searchValue.trim());
-            router.push(`/collection/${item.slug}`);
-        } else if (item.type === 'recent') {
-            onSearchValueChange(item.term);
-            onSubmit(item.term);
-        } else if (item.type === 'view-all') {
-            addSearch(searchValue.trim());
-            onSubmit(searchValue.trim());
-        }
-    }, [router, searchValue, addSearch, onSearchValueChange, onSubmit]);
+    const navigateToItem = useCallback(
+        (item: NavItem) => {
+            setIsOpen(false);
+            if (item.type === 'product') {
+                addSearch(searchValue.trim());
+                router.push(`/product/${item.slug}`);
+            } else if (item.type === 'collection') {
+                addSearch(searchValue.trim());
+                router.push(`/collection/${item.slug}`);
+            } else if (item.type === 'recent') {
+                onSearchValueChange(item.term);
+                onSubmit(item.term);
+            } else if (item.type === 'view-all') {
+                addSearch(searchValue.trim());
+                onSubmit(searchValue.trim());
+            }
+        },
+        [router, searchValue, addSearch, onSearchValueChange, onSubmit],
+    );
 
     // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-        if (!isOpen) {
-            if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
-                setIsOpen(true);
-                e.preventDefault();
+    const handleKeyDown = useCallback(
+        (e: React.KeyboardEvent) => {
+            if (!isOpen) {
+                if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+                    setIsOpen(true);
+                    e.preventDefault();
+                }
+                return;
             }
-            return;
-        }
 
-        switch (e.key) {
-            case 'ArrowDown':
-                e.preventDefault();
-                setActiveIndex(prev => (prev + 1) % items.length);
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                setActiveIndex(prev => (prev <= 0 ? items.length - 1 : prev - 1));
-                break;
-            case 'Enter':
-                if (activeIndex >= 0 && activeIndex < items.length) {
+            switch (e.key) {
+                case 'ArrowDown':
                     e.preventDefault();
-                    navigateToItem(items[activeIndex]);
-                } else if (searchValue.trim()) {
+                    setActiveIndex((prev) => (prev + 1) % items.length);
+                    break;
+                case 'ArrowUp':
                     e.preventDefault();
-                    const firstProduct = items.find(item => item.type === 'product');
-                    if (firstProduct) {
-                        addSearch(searchValue.trim());
-                        navigateToItem(firstProduct);
-                    } else {
-                        addSearch(searchValue.trim());
-                        onSubmit(searchValue.trim());
-                        setIsOpen(false);
+                    setActiveIndex((prev) => (prev <= 0 ? items.length - 1 : prev - 1));
+                    break;
+                case 'Enter':
+                    if (activeIndex >= 0 && activeIndex < items.length) {
+                        e.preventDefault();
+                        navigateToItem(items[activeIndex]);
+                    } else if (searchValue.trim()) {
+                        e.preventDefault();
+                        const firstProduct = items.find((item) => item.type === 'product');
+                        if (firstProduct) {
+                            addSearch(searchValue.trim());
+                            navigateToItem(firstProduct);
+                        } else {
+                            addSearch(searchValue.trim());
+                            onSubmit(searchValue.trim());
+                            setIsOpen(false);
+                        }
                     }
-                }
-                break;
-            case 'Escape':
-                setIsOpen(false);
-                setActiveIndex(-1);
-                break;
-        }
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    }, [isOpen, activeIndex, items, searchValue, navigateToItem, addSearch, onSubmit]);
-
-    const showDropdown = isOpen && (
-        (searchValue.trim().length >= 2 && (results || isPending)) ||
-        (!searchValue.trim() && recentSearches.length > 0)
+                    break;
+                case 'Escape':
+                    setIsOpen(false);
+                    setActiveIndex(-1);
+                    break;
+            }
+            // eslint-disable-next-line react-hooks/preserve-manual-memoization
+        },
+        [isOpen, activeIndex, items, searchValue, navigateToItem, addSearch, onSubmit],
     );
 
+    const showDropdown =
+        isOpen &&
+        ((searchValue.trim().length >= 2 && (results || isPending)) ||
+            (!searchValue.trim() && recentSearches.length > 0));
+
     return (
-        <div
-            onFocus={handleFocus}
-            onKeyDown={handleKeyDown}
-            className="relative"
-        >
+        <div onFocus={handleFocus} onKeyDown={handleKeyDown} className="relative">
             {children}
             {showDropdown && (
-                    <div
-                        ref={dropdownRef}
-                        className={`absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 overflow-hidden ${dropdownClassName}`}
-                        role="listbox"
-                    >
-                        {/* Recent searches (when input is empty) */}
-                        {!searchValue.trim() && recentSearches.length > 0 && (
-                            <div>
-                                <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                                    Recent Searches
-                                </div>
-                                {recentSearches.map((term, i) => (
-                                    <div
-                                        key={term}
-                                        role="option"
-                                        aria-selected={activeIndex === i}
-                                        className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
-                                            activeIndex === i ? 'bg-primary/15' : 'hover:bg-accent/50'
+                <div
+                    ref={dropdownRef}
+                    className={`absolute top-full left-0 right-0 mt-1 bg-popover border border-border rounded-md shadow-lg z-50 overflow-hidden ${dropdownClassName}`}
+                    role="listbox"
+                >
+                    {/* Recent searches (when input is empty) */}
+                    {!searchValue.trim() && recentSearches.length > 0 && (
+                        <div>
+                            <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                Recent Searches
+                            </div>
+                            {recentSearches.map((term, i) => (
+                                <div
+                                    key={term}
+                                    role="option"
+                                    aria-selected={activeIndex === i}
+                                    className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
+                                        activeIndex === i ? 'bg-primary/15' : 'hover:bg-accent/50'
+                                    }`}
+                                    onMouseEnter={() => setActiveIndex(i)}
+                                    onClick={() => navigateToItem(items[i])}
+                                >
+                                    <Clock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                    <span
+                                        className={`flex-1 truncate ${
+                                            activeIndex === i ? 'text-primary' : ''
                                         }`}
-                                        onMouseEnter={() => setActiveIndex(i)}
-                                        onClick={() => navigateToItem(items[i])}
                                     >
-                                        <Clock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-                                        <span className={`flex-1 truncate ${activeIndex === i ? 'text-primary' : ''}`}>{term}</span>
-                                        <button
-                                            type="button"
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                removeSearch(term);
-                                            }}
-                                            className="p-0.5 hover:bg-muted rounded"
-                                        >
-                                            <X className="h-3 w-3 text-muted-foreground" />
-                                        </button>
-                                    </div>
-                                ))}
-                            </div>
-                        )}
+                                        {term}
+                                    </span>
+                                    <button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            removeSearch(term);
+                                        }}
+                                        className="p-0.5 hover:bg-muted rounded"
+                                    >
+                                        <X className="h-3 w-3 text-muted-foreground" />
+                                    </button>
+                                </div>
+                            ))}
+                        </div>
+                    )}
 
-                        {/* Loading state */}
-                        {searchValue.trim().length >= 2 && isPending && !results && (
-                            <div className="px-3 py-4 text-sm text-muted-foreground text-center">
-                                Searching...
-                            </div>
-                        )}
+                    {/* Loading state */}
+                    {searchValue.trim().length >= 2 && isPending && !results && (
+                        <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                            Searching...
+                        </div>
+                    )}
 
-                        {/* Results */}
-                        {searchValue.trim().length >= 2 && results && (
-                            <>
-                                {/* Product results (shown first) */}
-                                {results.products.length > 0 && (
-                                    <div>
-                                        <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                                            Products
-                                        </div>
-                                        {results.products.map((product, i) => {
-                                            const itemIndex = i;
-                                            return (
-                                                <div
-                                                    key={product.productId}
-                                                    role="option"
-                                                    aria-selected={activeIndex === itemIndex}
-                                                    className={`flex items-center gap-3 px-3 py-2 cursor-pointer ${
-                                                        activeIndex === itemIndex ? 'bg-primary/15' : 'hover:bg-accent/50'
-                                                    }`}
-                                                    onMouseEnter={() => setActiveIndex(itemIndex)}
-                                                    onClick={() => navigateToItem(items[itemIndex])}
-                                                >
-                                                    {product.imageUrl ? (
-                                                        <Image
-                                                            src={`${product.imageUrl}?w=80&h=80&mode=crop`}
-                                                            alt={product.productName}
-                                                            width={40}
-                                                            height={40}
-                                                            className="rounded object-cover flex-shrink-0"
-                                                        />
-                                                    ) : (
-                                                        <div className="w-10 h-10 rounded bg-muted flex items-center justify-center flex-shrink-0">
-                                                            <Package className="h-4 w-4 text-muted-foreground" />
-                                                        </div>
-                                                    )}
-                                                    <div className="flex-1 min-w-0">
-                                                        <div className={`text-sm font-medium truncate ${activeIndex === itemIndex ? 'text-primary' : ''}`}>
-                                                            {product.productName}
-                                                        </div>
-                                                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                                                            <span className="font-mono">{product.sku}</span>
-                                                            <span>&#183;</span>
-                                                            <span>{formatProductPrice(product, locale)}</span>
-                                                        </div>
+                    {/* Results */}
+                    {searchValue.trim().length >= 2 && results && (
+                        <>
+                            {/* Product results (shown first) */}
+                            {results.products.length > 0 && (
+                                <div>
+                                    <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                        Products
+                                    </div>
+                                    {results.products.map((product, i) => {
+                                        const itemIndex = i;
+                                        return (
+                                            <div
+                                                key={product.productId}
+                                                role="option"
+                                                aria-selected={activeIndex === itemIndex}
+                                                className={`flex items-center gap-3 px-3 py-2 cursor-pointer ${
+                                                    activeIndex === itemIndex
+                                                        ? 'bg-primary/15'
+                                                        : 'hover:bg-accent/50'
+                                                }`}
+                                                onMouseEnter={() => setActiveIndex(itemIndex)}
+                                                onClick={() => navigateToItem(items[itemIndex])}
+                                            >
+                                                {product.imageUrl ? (
+                                                    <Image
+                                                        src={`${product.imageUrl}?w=80&h=80&mode=crop`}
+                                                        alt={product.productName}
+                                                        width={40}
+                                                        height={40}
+                                                        className="rounded object-cover flex-shrink-0"
+                                                    />
+                                                ) : (
+                                                    <div className="w-10 h-10 rounded bg-muted flex items-center justify-center flex-shrink-0">
+                                                        <Package className="h-4 w-4 text-muted-foreground" />
+                                                    </div>
+                                                )}
+                                                <div className="flex-1 min-w-0">
+                                                    <div
+                                                        className={`text-sm font-medium truncate ${
+                                                            activeIndex === itemIndex ? 'text-primary' : ''
+                                                        }`}
+                                                    >
+                                                        {product.productName}
+                                                    </div>
+                                                    <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                                        <span className="font-mono">{product.sku}</span>
+                                                        <span>&#183;</span>
+                                                        <span>{formatProductPrice(product, locale)}</span>
                                                     </div>
-                                                    {product.inStock ? (
-                                                        <span className="text-xs text-green-500 flex-shrink-0">{tProduct('inStock')}</span>
-                                                    ) : (
-                                                        <span className="text-xs text-red-500 flex-shrink-0">{tProduct('outOfStock')}</span>
-                                                    )}
                                                 </div>
-                                            );
-                                        })}
-                                    </div>
-                                )}
+                                                {product.inStock ? (
+                                                    <span className="text-xs text-green-500 flex-shrink-0">
+                                                        {tProduct('inStock')}
+                                                    </span>
+                                                ) : (
+                                                    <span className="text-xs text-red-500 flex-shrink-0">
+                                                        {tProduct('outOfStock')}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            )}
 
-                                {/* Collection suggestions */}
-                                {collections.length > 0 && (
-                                    <div>
-                                        {results.products.length > 0 && (
-                                            <div className="border-t border-border" />
-                                        )}
-                                        <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
-                                            {tCatalog('categories')}
-                                        </div>
-                                        {collections.map((collection, i) => {
-                                            const itemIndex = results.products.length + i;
-                                            return (
-                                                <div
-                                                    key={collection.id}
-                                                    role="option"
-                                                    aria-selected={activeIndex === itemIndex}
-                                                    className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
-                                                        activeIndex === itemIndex ? 'bg-primary/15' : 'hover:bg-accent/50'
+                            {/* Collection suggestions */}
+                            {collections.length > 0 && (
+                                <div>
+                                    {results.products.length > 0 && (
+                                        <div className="border-t border-border" />
+                                    )}
+                                    <div className="px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                        {tCatalog('categories')}
+                                    </div>
+                                    {collections.map((collection, i) => {
+                                        const itemIndex = results.products.length + i;
+                                        return (
+                                            <div
+                                                key={collection.id}
+                                                role="option"
+                                                aria-selected={activeIndex === itemIndex}
+                                                className={`flex items-center gap-2 px-3 py-2 cursor-pointer text-sm ${
+                                                    activeIndex === itemIndex
+                                                        ? 'bg-primary/15'
+                                                        : 'hover:bg-accent/50'
+                                                }`}
+                                                onMouseEnter={() => setActiveIndex(itemIndex)}
+                                                onClick={() => navigateToItem(items[itemIndex])}
+                                            >
+                                                <FolderOpen className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                <span
+                                                    className={`flex-1 truncate ${
+                                                        activeIndex === itemIndex
+                                                            ? 'text-primary font-medium'
+                                                            : ''
                                                     }`}
-                                                    onMouseEnter={() => setActiveIndex(itemIndex)}
-                                                    onClick={() => navigateToItem(items[itemIndex])}
                                                 >
-                                                    <FolderOpen className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-                                                    <span className={`flex-1 truncate ${activeIndex === itemIndex ? 'text-primary font-medium' : ''}`}>{collection.name}</span>
-                                                    <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
-                                                </div>
-                                            );
-                                        })}
-                                    </div>
-                                )}
+                                                    {collection.name}
+                                                </span>
+                                                <ArrowRight className="h-3.5 w-3.5 text-muted-foreground" />
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            )}
 
-                                {/* No results */}
-                                {results.products.length === 0 && collections.length === 0 && (
-                                    <div className="px-3 py-4 text-sm text-muted-foreground text-center">
-                                        No results for &ldquo;{searchValue.trim()}&rdquo;
-                                    </div>
-                                )}
+                            {/* No results */}
+                            {results.products.length === 0 && collections.length === 0 && (
+                                <div className="px-3 py-4 text-sm text-muted-foreground text-center">
+                                    No results for &ldquo;{searchValue.trim()}&rdquo;
+                                </div>
+                            )}
 
-                                {/* View all results footer */}
-                                {results.totalItems > 0 && (
-                                    <>
-                                        <div className="border-t border-border" />
-                                        {(() => {
-                                            const viewAllIndex = items.length - 1;
-                                            return (
-                                                <div
-                                                    role="option"
-                                                    aria-selected={activeIndex === viewAllIndex}
-                                                    className={`flex items-center justify-center gap-2 px-3 py-2.5 cursor-pointer text-sm font-medium ${
-                                                        activeIndex === viewAllIndex
-                                                            ? 'bg-primary text-primary-foreground'
-                                                            : 'text-primary hover:bg-accent/50'
-                                                    }`}
-                                                    onMouseEnter={() => setActiveIndex(viewAllIndex)}
-                                                    onClick={() => navigateToItem(items[viewAllIndex])}
-                                                >
-                                                    <Search className="h-3.5 w-3.5" />
-                                                    View all {results.totalItems} results
-                                                </div>
-                                            );
-                                        })()}
-                                    </>
-                                )}
-                            </>
-                        )}
-                    </div>
+                            {/* View all results footer */}
+                            {results.totalItems > 0 && (
+                                <>
+                                    <div className="border-t border-border" />
+                                    {(() => {
+                                        const viewAllIndex = items.length - 1;
+                                        return (
+                                            <div
+                                                role="option"
+                                                aria-selected={activeIndex === viewAllIndex}
+                                                className={`flex items-center justify-center gap-2 px-3 py-2.5 cursor-pointer text-sm font-medium ${
+                                                    activeIndex === viewAllIndex
+                                                        ? 'bg-primary text-primary-foreground'
+                                                        : 'text-primary hover:bg-accent/50'
+                                                }`}
+                                                onMouseEnter={() => setActiveIndex(viewAllIndex)}
+                                                onClick={() => navigateToItem(items[viewAllIndex])}
+                                            >
+                                                <Search className="h-3.5 w-3.5" />
+                                                View all {results.totalItems} results
+                                            </div>
+                                        );
+                                    })()}
+                                </>
+                            )}
+                        </>
+                    )}
+                </div>
             )}
         </div>
     );
@@ -347,7 +375,7 @@ function buildItemList(
 ): NavItem[] {
     // Empty input → show recent searches
     if (!searchValue.trim()) {
-        return recentSearches.map(term => ({ type: 'recent', term }));
+        return recentSearches.map((term) => ({ type: 'recent', term }));
     }
 
     if (!results) return [];
@@ -366,7 +394,10 @@ function buildItemList(
     return items;
 }
 
-function formatProductPrice(product: { price: { type: string; value?: number; min?: number; max?: number } }, locale: string): string {
+function formatProductPrice(
+    product: { price: { type: string; value?: number; min?: number; max?: number } },
+    locale: string,
+): string {
     if (product.price.type === 'single' && product.price.value != null) {
         return formatPrice(product.price.value, locale);
     }

package/dist/assets/storefront/src/components/commerce/order-status-badge.tsx

@@ -1,40 +1,48 @@
-import {Badge} from '@/components/ui/badge';
+import { Badge } from '@/components/ui/badge';
 import {
-    ShoppingCart,
-    CreditCard,
-    Clock,
     CheckCircle,
-    Truck,
-    PackageCheck,
+    Clock,
+    CreditCard,
     Package,
+    PackageCheck,
+    ShoppingCart,
+    Truck,
     XCircle,
     type LucideIcon,
 } from 'lucide-react';
 
 const STATUS_CONFIG: Record<string, { color: string; label: string; icon: LucideIcon }> = {
-    AddingItems: {color: 'bg-gray-100 text-gray-800', label: 'Adding Items', icon: ShoppingCart},
-    ArrangingPayment: {color: 'bg-yellow-100 text-yellow-800', label: 'Arranging Payment', icon: CreditCard},
-    PaymentAuthorized: {color: 'bg-blue-100 text-blue-800', label: 'Payment Authorized', icon: Clock},
-    PaymentSettled: {color: 'bg-green-100 text-green-800', label: 'Payment Settled', icon: CheckCircle},
-    PartiallyShipped: {color: 'bg-indigo-100 text-indigo-800', label: 'Partially Shipped', icon: Package},
-    Shipped: {color: 'bg-purple-100 text-purple-800', label: 'Shipped', icon: Truck},
-    PartiallyDelivered: {color: 'bg-cyan-100 text-cyan-800', label: 'Partially Delivered', icon: PackageCheck},
-    Delivered: {color: 'bg-emerald-100 text-emerald-800', label: 'Delivered', icon: PackageCheck},
-    Cancelled: {color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: XCircle},
-    AwaitingApproval: {color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock},
+    AddingItems: { color: 'bg-gray-100 text-gray-800', label: 'Adding Items', icon: ShoppingCart },
+    ArrangingPayment: {
+        color: 'bg-yellow-100 text-yellow-800',
+        label: 'Arranging Payment',
+        icon: CreditCard,
+    },
+    PaymentAuthorized: { color: 'bg-blue-100 text-blue-800', label: 'Payment Authorized', icon: Clock },
+    PaymentSettled: { color: 'bg-green-100 text-green-800', label: 'Payment Settled', icon: CheckCircle },
+    PartiallyShipped: { color: 'bg-indigo-100 text-indigo-800', label: 'Partially Shipped', icon: Package },
+    Shipped: { color: 'bg-purple-100 text-purple-800', label: 'Shipped', icon: Truck },
+    PartiallyDelivered: {
+        color: 'bg-cyan-100 text-cyan-800',
+        label: 'Partially Delivered',
+        icon: PackageCheck,
+    },
+    Delivered: { color: 'bg-emerald-100 text-emerald-800', label: 'Delivered', icon: PackageCheck },
+    Cancelled: { color: 'bg-red-100 text-red-800', label: 'Cancelled', icon: XCircle },
+    AwaitingApproval: { color: 'bg-amber-100 text-amber-800', label: 'Awaiting Approval', icon: Clock },
 };
 
 interface OrderStatusBadgeProps {
     state: string;
 }
 
-export function OrderStatusBadge({state}: OrderStatusBadgeProps) {
-    const config = STATUS_CONFIG[state] || {color: 'bg-gray-100 text-gray-800', label: state, icon: Clock};
+export function OrderStatusBadge({ state }: OrderStatusBadgeProps) {
+    const config = STATUS_CONFIG[state] || { color: 'bg-gray-100 text-gray-800', label: state, icon: Clock };
     const Icon = config.icon;
 
     return (
         <Badge className={config.color} variant="secondary">
-            <Icon className="h-3 w-3 mr-1"/>
+            <Icon className="h-3 w-3 mr-1" />
             {config.label}
         </Badge>
     );