@riosst100/pwa-marketplace 1.4.6 → 1.4.8

package/i18n/id_ID.json

@@ -1,6 +1,6 @@
 {
     "About Us": "About Us",
-    "Account": "Akun",
+    "Account": "Account",
     "accountChip.chipText": "Hi, {name}",
     "accountInformationPage.accountInformation": "Account Information",
     "accountInformationPage.editAccount": "Edit Account Information",
@@ -15,9 +15,9 @@
     "accountMenu.signOutButtonText": "Sign Out",
     "accountMenu.storeCreditLink": "Store Credit & Gift Cards",
     "accountTrigger.ariaLabelMyMenu": "Toggle My Account Menu",
-    "accountTrigger.ariaLabelSignIn": "Masuk",
-    "accountTrigger.buttonFallback": "Masuk",
-    "accountTrigger.signIn": "Masuk",
+    "accountTrigger.ariaLabelSignIn": "Sign In",
+    "accountTrigger.buttonFallback": "Sign In",
+    "accountTrigger.signIn": "Sign In",
     "addressBook.addNewAddresstext": "Add New Address",
     "addressBook.applyButtonText": "Apply",
     "addressBook.cancelButtonText": "Cancel",
@@ -172,7 +172,7 @@
     "field.optional": "Optional",
     "filterFooter.results": "See Results",
     "filterList.showMore": "Show More",
-    "filterList.viewAll": "Lihat Selengkapnya",
+    "filterList.viewAll": "View All",
     "filterList.showLess": "Show Less",
     "filterModal.action": "Clear all",
     "filterModal.action.clearAll.ariaLabel": "Clear all applied filters",
@@ -277,15 +277,15 @@
     "navHeader.accountText": "Account",
     "navHeader.createAccountText": "Create Account",
     "navHeader.forgotPasswordText": "Forgot Password",
-    "navHeader.mainMenuText": "Menu Saya",
+    "navHeader.mainMenuText": "Main Menu",
     "navHeader.myAccountText": "My Account",
     "navHeader.signInText": "Sign In",
     "navigationTrigger.ariaLabel": "Toggle navigation panel",
     "newsletter.subscribeMessage": "The email address is subscribed.",
     "newsletter.loadingText": "Subscribing",
-    "newsletter.titleText": "Subscribe to Venia",
+    "newsletter.titleText": "Subscribe",
     "newsletter.subscribeText": "Subscribe",
-    "newsletter.infoText": "Recieve the latest news, update and special offers right to your inbox.",
+    "newsletter.infoText": "By subscribing you agree to receive email from us. Please read our Privacy Policy",
     "noProductsFound.noProductsFound": "Sorry! We couldn't find any products.",
     "noProductsFound.tryOneOfTheseCategories": "Try one of these categories",
     "Order Status": "Order Status",
@@ -412,7 +412,7 @@
     "shippingForm.getShippingOptions": "Get Shipping Options",
     "shippingForm.loading": "Loading Methods...",
     "shippingForm.zip": "Postal Code",
-    "shippingForm.shippingEmail":"Shipping Email",
+    "shippingForm.shippingEmail": "Shipping Email",
     "shippingInformation.cardTitle": "Shipping Information",
     "shippingInformation.editTitle": "1. Shipping Information",
     "shippingInformation.loading": "Fetching Shipping Information...",
@@ -487,23 +487,23 @@
     "wishlist.itemsMessage": "You have {count} items in your wishlist",
     "wishlist.itemCountClosed": "You have {count} {count, plural, one {item} other {items}} in this list",
     "wishlist.loadMore": "Load More",
-    "LegacyMiniCart.buttonExpanded":"More Options Expanded",
-    "LegacyMiniCart.buttonCollapsed":"More Options Collapsed",
-    "global.deletedButton":"Item Deleted",
-    "password.hide":"Hide Password",
-    "password.View":"View Password",
-    "global.clearText":"Clear Text",
-    "global.close":"Close",
-    "global.firstNameRequired":"First Name is required",
-    "global.lastNameRequired":"Last Name is required",
-    "global.emailRequired":"Email is required",
-    "global.passwordRequired":"Password is required",
-    "global.countryRequired":"Country is required",
-    "global.streetAddressRequired":"Address Line 1 is required",
-    "global.cityRequired":"City is required",
-    "global.stateRequired":"State / Province is required",
-    "Form.postalCode":"Postal Code is required",
-    "Form.phonenumber":"Contact Number is required",
-    "ProductOptions.productSize":"Fashion size {label}",
-    "productOptions.selectedSize":"Fashion size {label} button selected"
-}
+    "LegacyMiniCart.buttonExpanded": "More Options Expanded",
+    "LegacyMiniCart.buttonCollapsed": "More Options Collapsed",
+    "global.deletedButton": "Item Deleted",
+    "password.hide": "Hide Password",
+    "password.View": "View Password",
+    "global.clearText": "Clear Text",
+    "global.close": "Close",
+    "global.firstNameRequired": "First Name is required",
+    "global.lastNameRequired": "Last Name is required",
+    "global.emailRequired": "Email is required",
+    "global.passwordRequired": "Password is required",
+    "global.countryRequired": "Country is required",
+    "global.streetAddressRequired": "Address Line 1 is required",
+    "global.cityRequired": "City is required",
+    "global.stateRequired": "State / Province is required",
+    "Form.postalCode": "Postal Code is required",
+    "Form.phonenumber": "Contact Number is required",
+    "ProductOptions.productSize": "Fashion size {label}",
+    "productOptions.selectedSize": "Fashion size {label} button selected"
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@riosst100/pwa-marketplace",
   "author": "riosst100@gmail.com",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "main": "src/index.js",
   "pwa-studio": {
     "targets": {

package/src/componentOverrideMapping.js

@@ -41,4 +41,7 @@ module.exports = componentOverrideMapping = {
     [`@magento/venia-ui/lib/components/RadioGroup/radio.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RadioGroup/radio.js',
     [`@magento/venia-ui/lib/components/Button/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Button/index.js',
     [`@magento/venia-ui/lib/components/RichText/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/RichText/index.js',
+    [`@magento/venia-ui/lib/components/Main/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Main/index.js',
+    [`@magento/venia-ui/lib/components/Footer/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Footer/index.js',
+    [`@magento/venia-ui/lib/components/Newsletter/index.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Newsletter/index.js',
 };

package/src/components/BrandLandingPage/brandInfo.js

@@ -0,0 +1,93 @@
+import React from 'react';
+import cn from 'classnames';
+import { Share } from 'iconsax-react';
+import { X } from 'react-feather';
+import Modal from '@riosst100/pwa-marketplace/src/components/Modal';
+import SocialShare from '@riosst100/pwa-marketplace/src/components/SocialMediaShare';
+import { primary900 } from '@riosst100/pwa-marketplace/src/theme/vars'
+
+const brandInfo = () => {
+
+    const initialName = (name) => {
+        if (!name) return ""; // Handle empty names
+
+        const words = name.split(" ");
+        let initials = "";
+
+        for (const word of words) {
+            initials += word.charAt(0).toUpperCase();
+        }
+
+        return initials;
+    }
+
+    const [open, setOpen] = React.useState(false)
+
+    return (
+        <>
+            <Modal
+                open={open}
+                setOpen={setOpen}
+                className={cn(
+                    'max-w-max !min-h-auto px-[30px] pt-[30px] pb-10',
+                )}
+            >
+                <div className='social_share-container flex flex-col gap-y-7'>
+                    <div className='flex justify-between'>
+                        <div className='text-lg font-semibold'>
+                            Share to your friends
+                        </div>
+                        <button onClick={() => { setOpen(!open) }} >
+                            <X size={24} color={primary900} />
+                        </button>
+                    </div>
+                    <div className='flex flex-row border border-gray-100 rounded-md px-5 py-2.5 gap-x-2.5 items-center'>
+                        <div
+                            className={cn(
+                                'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5',
+                                'p-2 rounded-md relative w-12 h-12 text-center flex items-center justify-center'
+                            )}
+                        >
+                            {initialName('Bandai Namco')}
+                        </div>
+                        <div className='flex flex-col'>
+                            <div className='text-[14px] font-normal'>
+                                Bandai Namco.TCG
+                            </div>
+                            <div className='text-[12px] font-normal text-gray-200'>
+                                bandainamco-tcg.link
+                            </div>
+                        </div>
+                    </div>
+                    <SocialShare rootClassName="justify-center" />
+                </div>
+            </Modal>
+            <div className='flex justify-between items-center border border-gray-100 p-5 rounded-md mt-[30px] mb-8'>
+                <div className='brand_name-wrapper flex gap-x-[15px] items-center'>
+                    <div
+                        className={cn(
+                            'bg-darkblue-900 text-white uppercase text-lg font-bold leading-5',
+                            'p-5 rounded-md relative w-[100px] h-[100px] text-center flex items-center justify-center'
+                        )}
+                    >
+                        {initialName('Bandai Namco')}
+                    </div>
+                    <div className='text-lg font-semibold'>
+                        Bandai Namco
+                    </div>
+                </div>
+                <div
+                    className='share-wrapper border border-blue-600 rounded-md p-2 group cursor-pointer'
+                    onClick={() => { setOpen(!open) }}
+                >
+                    <Share
+                        size="15"
+                        className='text-blue-600 group-hover_text-blue-800'
+                    />
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default brandInfo

package/src/components/BrandLandingPage/brandLanding.js

@@ -0,0 +1,255 @@
+import React, { Fragment, Suspense, useMemo, useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { array, number, shape, string } from 'prop-types';
+
+import { useIsInViewport } from '@magento/peregrine/lib/hooks/useIsInViewport';
+import { useCategoryContent } from '@magento/peregrine/lib/talons/RootComponents/Category';
+
+import { useStyle } from '@magento/venia-ui/lib/classify';
+import Breadcrumbs from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Breadcrumbs';
+import FilterModalOpenButton, {
+    FilterModalOpenButtonShimmer
+} from '@magento/venia-ui/lib/components/FilterModalOpenButton';
+import { FilterSidebarShimmer } from '@magento/venia-ui/lib/components/FilterSidebar';
+import Gallery, { GalleryShimmer } from '@magento/venia-ui/lib/components/Gallery';
+import { StoreTitle } from '@magento/venia-ui/lib/components/Head';
+import Pagination from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/Pagination';
+import ProductSort, { ProductSortShimmer } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/ProductSort';
+import RichContent from '@magento/venia-ui/lib/components/RichContent';
+import Shimmer from '@magento/venia-ui/lib/components/Shimmer';
+import SortedByContainer, {
+    SortedByContainerShimmer
+} from '@magento/venia-ui/lib/components/SortedByContainer';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
+import NoProductsFound from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/NoProductsFound';
+import cn from 'classnames';
+import ProductListTab, { ProductListTabShimmer } from '@riosst100/pwa-marketplace/src/components/ProductListTab';
+import SubCategory from '@riosst100/pwa-marketplace/src/components/SubCategory/subCategory';
+import AttributesBlock from '@riosst100/pwa-marketplace/src/components/AttributesBlock/attributesBlock';
+
+import ProductLineSlider from '@riosst100/pwa-marketplace/src/components/ProductLineSlider';
+import BrandMenu from './menu';
+import BrandInfo from './brandInfo';
+
+const FilterModal = React.lazy(() => import('@magento/venia-ui/lib/components/FilterModal'));
+const FilterSidebar = React.lazy(() =>
+    import('@magento/venia-ui/lib/components/FilterSidebar')
+);
+
+const CategoryContent = props => {
+    const {
+        categoryId,
+        data,
+        isLoading,
+        pageControl,
+        sortProps,
+        pageSize
+    } = props;
+    const [currentSort] = sortProps;
+
+    const talonProps = useCategoryContent({
+        categoryId,
+        data,
+        pageSize
+    });
+
+    const {
+        availableSortMethods,
+        categoryName,
+        categoryDescription,
+        filters,
+        items,
+        children,
+        totalCount,
+        totalPagesFromData,
+        attributesBlock,
+        category
+    } = talonProps;
+
+    const sidebarRef = useRef(null);
+    const classes = useStyle(defaultClasses, props.classes);
+    const shouldRenderSidebarContent = useIsInViewport({
+        elementRef: sidebarRef
+    });
+
+    const shouldShowFilterButtons = filters && filters.length;
+    const shouldShowFilterShimmer = filters === null;
+
+    // If there are no products we can hide the sort button.
+    const shouldShowSortButtons = totalPagesFromData && availableSortMethods;
+    const shouldShowSortShimmer = !totalPagesFromData && isLoading;
+
+    const maybeFilterButtons = shouldShowFilterButtons ? (
+        <FilterModalOpenButton filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterModalOpenButtonShimmer />
+    ) : null;
+
+    const filtersModal = shouldShowFilterButtons ? (
+        <FilterModal filters={filters} />
+    ) : null;
+
+    const sidebar = shouldShowFilterButtons ? (
+        <FilterSidebar filters={filters} />
+    ) : shouldShowFilterShimmer ? (
+        <FilterSidebarShimmer />
+    ) : null;
+
+    const maybeSortButton = shouldShowSortButtons ? (
+        <ProductSort
+            sortProps={sortProps}
+            availableSortMethods={availableSortMethods}
+        />
+    ) : shouldShowSortShimmer ? (
+        <ProductSortShimmer />
+    ) : null;
+
+    const shouldShowProductListTab = totalPagesFromData;
+    const shouldShowProductListTabShimmer = !totalPagesFromData && isLoading;
+
+    const maybeSortContainer = shouldShowSortButtons ? (
+        <SortedByContainer currentSort={currentSort} />
+    ) : shouldShowSortShimmer ? (
+        <SortedByContainerShimmer />
+    ) : null;
+
+    const maybeProductsTabContainer = shouldShowProductListTab ? (
+        <ProductListTab />
+    ) : shouldShowProductListTabShimmer ? (
+        <ProductListTabShimmer />
+    ) : null;
+
+    const categoryResultsHeading =
+        totalCount > 0 ? (
+            <FormattedMessage
+                id={'categoryContent.resultCount'}
+                values={{
+                    count: totalCount
+                }}
+                defaultMessage={'{count} Results'}
+            />
+        ) : isLoading ? (
+            <Shimmer width={5} />
+        ) : null;
+
+    const categoryDescriptionElement = categoryDescription ? (
+        <RichContent html={categoryDescription} />
+    ) : null;
+
+    const content = useMemo(() => {
+        if (!totalPagesFromData && !isLoading) {
+            return <NoProductsFound categoryId={categoryId} />;
+        }
+
+        const gallery = totalPagesFromData ? (
+            <Gallery items={items} />
+        ) : (
+            <GalleryShimmer items={items} />
+        );
+
+        const pagination = totalPagesFromData ? (
+            <Pagination pageControl={pageControl} />
+        ) : null;
+
+        return (
+            <Fragment>
+                <section className={classes.gallery}>{gallery}</section>
+                <div className={classes.pagination}>{pagination}</div>
+            </Fragment>
+        );
+    }, [
+        categoryId,
+        classes.gallery,
+        classes.pagination,
+        isLoading,
+        items,
+        pageControl,
+        totalPagesFromData
+    ]);
+
+    const categoryTitle = categoryName ? categoryName : <Shimmer width={5} />;
+
+    return (
+        <Fragment>
+            {/* <Breadcrumbs categoryId={categoryId} /> */}
+            <StoreTitle>{categoryName}</StoreTitle>
+            <article className={classes.root} data-cy="CategoryContent-root">
+                <section className={classes.categoryHeader}>
+                    {/* <h1 aria-live="polite" className={classes.title}>
+                        <span
+                            className={classes.categoryTitle}
+                            data-cy="CategoryContent-categoryTitle"
+                        >
+                            {categoryTitle}
+                        </span>
+                    </h1>
+                    {categoryDescriptionElement} */}
+                    <BrandInfo />
+                </section>
+                {/* <SubCategory children={children} /> */}
+                <AttributesBlock category={category} attributesBlock={attributesBlock} />
+                <section
+                    className={cn(
+                        'category_brand-slider my-5 before_absolute before_bg-[#F8F8F8]',
+                        'before_min-h-[120px] before_w-full before_left-0 before_!block before_z-[-1] before_mt-[-15px]'
+                    )}
+                >
+                    <ProductLineSlider />
+                </section>
+                <section className='brand_menu'>
+                    <BrandMenu />
+                </section>
+                <div className={classes.contentWrapper}>
+                    <div ref={sidebarRef} className={classes.sidebar}>
+                        <Suspense fallback={<FilterSidebarShimmer />}>
+                            {shouldRenderSidebarContent ? sidebar : null}
+                        </Suspense>
+                    </div>
+                    <div className={classes.categoryContent}>
+                        <div className={cn(classes.heading)}>
+                            {maybeProductsTabContainer}
+                            <div className={classes.headerButtons}>
+                                {maybeFilterButtons}
+                                {maybeSortButton}
+                            </div>
+                            {maybeSortContainer}
+                        </div>
+                        <div className={cn(classes.heading)}>
+                            <div
+                                data-cy="CategoryContent-categoryInfo"
+                                className={classes.categoryInfo}
+                            >
+                                {categoryResultsHeading}
+                            </div>
+                        </div>
+                        {content}
+                        <Suspense fallback={null}>{filtersModal}</Suspense>
+                    </div>
+                </div>
+            </article>
+        </Fragment>
+    );
+};
+
+export default CategoryContent;
+
+CategoryContent.propTypes = {
+    classes: shape({
+        gallery: string,
+        pagination: string,
+        root: string,
+        categoryHeader: string,
+        title: string,
+        categoryTitle: string,
+        sidebar: string,
+        categoryContent: string,
+        heading: string,
+        categoryInfo: string,
+        headerButtons: string
+    }),
+    // sortProps contains the following structure:
+    // [{sortDirection: string, sortAttribute: string, sortText: string},
+    // React.Dispatch<React.SetStateAction<{sortDirection: string, sortAttribute: string, sortText: string}]
+    sortProps: array,
+    pageSize: number
+};

package/src/components/BrandLandingPage/index.js

@@ -0,0 +1,94 @@
+import React, { Fragment } from 'react';
+import { shape, string } from 'prop-types';
+import { useCategory } from '@magento/peregrine/lib/talons/RootComponents/Category';
+import { useStyle } from '@magento/venia-ui/lib/classify';
+
+import CategoryContent from './brandLanding';
+import defaultClasses from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.module.css';
+import { Meta } from '@magento/venia-ui/lib/components/Head';
+import { GET_PAGE_SIZE } from '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/RootComponents/Category/category.gql';
+import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
+import { useIntl } from 'react-intl';
+
+const MESSAGES = new Map().set(
+    'NOT_FOUND',
+    "Looks like the category you were hoping to find doesn't exist. Sorry about that."
+);
+
+const Category = props => {
+    const { uid } = props;
+    const { formatMessage } = useIntl();
+
+    const cat_id = "NTI=";
+
+    const talonProps = useCategory({
+        id: cat_id,
+        queries: {
+            getPageSize: GET_PAGE_SIZE
+        }
+    });
+
+
+    const {
+        error,
+        metaDescription,
+        loading,
+        categoryData,
+        pageControl,
+        sortProps,
+        pageSize,
+        categoryNotFound
+    } = talonProps;
+
+    const classes = useStyle(defaultClasses, props.classes);
+
+    if (!categoryData) {
+        if (error && pageControl.currentPage === 1) {
+            if (process.env.NODE_ENV !== 'production') {
+                console.error(error);
+            }
+
+            return <ErrorView />;
+        }
+    }
+    if (categoryNotFound) {
+        return (
+            <ErrorView
+                message={formatMessage({
+                    id: 'category.notFound',
+                    defaultMessage: MESSAGES.get('NOT_FOUND')
+                })}
+            />
+        );
+    }
+
+    return (
+        <Fragment>
+            <Meta name="description" content={metaDescription} />
+            <CategoryContent
+                categoryId={cat_id}
+                classes={classes}
+                data={categoryData}
+                isLoading={loading}
+                pageControl={pageControl}
+                sortProps={sortProps}
+                pageSize={pageSize}
+            />
+        </Fragment>
+    );
+};
+
+Category.propTypes = {
+    classes: shape({
+        gallery: string,
+        root: string,
+        title: string
+    }),
+    uid: string
+};
+
+Category.defaultProps = {
+    uid: 'Mg=='
+};
+
+export default Category;

package/src/components/BrandLandingPage/menu.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+const menu = () => {
+
+    const menu = ['Action Figures', 'Anime', 'Nendoroid']
+    return (
+        <>
+            <div className="menu_brand-container border border-gray-100 rounded-lg flex flex-wrap gap-x-10 gap-y-5 px-10">
+                {menu.map((item, index) => (
+                    <Link to="/" key={index} className="text-base font-medium my-3">
+                        {item}
+                    </Link>
+                ))}
+            </div>
+        </>
+    )
+}
+
+export default menu

package/src/components/BrandListPage/brandList.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import Divider from '@riosst100/pwa-marketplace/src/components/Divider';
+import BrandItem from '@riosst100/pwa-marketplace/src/components/BrandSlider/item';
+import cn from 'classnames';
+import Image from '@magento/venia-ui/lib/components/Image';
+import bannerImage from './banner_brands.png';
+
+const brandList = (props) => {
+    const { letters, groupedBrands, active, handleActive, availableLetter } = props;
+
+    return (
+        <>
+            <section className='brand_banner-container mt-6'>
+                <Image
+                    alt='brand-banner'
+                    className="relative"
+                    src={bannerImage}
+                />
+            </section>
+            <section className='brands_list-indexing-container relative m-auto py-10'>
+                <ul className='flex gap-2 justify-center flex-wrap'>
+                    <li >
+                        <button
+                            className={cn(
+                                'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                'leading-4 font-medium text-base hover_bg-gray-50'
+                            )}
+                            onClick={() => {
+                                handleActive('all')
+                            }}
+                        >
+                            All
+                        </button>
+                    </li>
+                    {letters.map((letter, index) => (
+                        <li key={index}>
+                            <button
+                                className={cn(
+                                    'rounded-md border border-solid border-gray-100 p-2 min-w-[28px]',
+                                    'leading-4 font-medium text-base ',
+                                    !availableLetter.includes(letter) ? 'bg-gray-100' : 'hover_bg-gray-50',
+                                )}
+                                onClick={() => {
+                                    handleActive(letter)
+                                }}
+                                disabled={!availableLetter.includes(letter)}
+                            >
+                                {letter}
+                            </button>
+                        </li>
+                    ))}
+                </ul>
+            </section>
+            <Divider className="mb-10" />
+            <section className='brand_list-container'>
+                <div className='brand_list-wrapper'>
+                    {availableLetter.map((initialLetter, index) => (
+                        <>
+                            {active === 'all' || active === initialLetter ? (
+                                <div className='brand_group-wrapper mb-10' key={index}>
+                                    <div className='brand_item_group_letter text-xl font-semibold mb-[30px]' >
+                                        {initialLetter}
+                                    </div>
+                                    <div
+                                        className={cn(
+                                            'brand_item-list grid grid-cols-2 sm_grid-cols-3 md_grid-cols-4 lg_grid-cols-5 -mx-2 lg_-mx-4 gap-y-4'
+                                        )}
+                                    >
+                                        {groupedBrands[initialLetter].map((brand, index) => (
+                                            <BrandItem
+                                                key={index}
+                                                name={brand.name}
+                                                className="cursor-pointer"
+                                                onClick={() => { alert(brand.name) }}
+                                            />
+                                        ))}
+                                    </div>
+                                </div>
+                            ) : null}
+                        </>
+                    ))}
+                </div>
+            </section>
+        </>
+    )
+}
+
+export default brandList