@riosst100/pwa-marketplace 1.2.5 → 1.2.7

package/src/components/SellerLocation/sellerLocation.js

@@ -1,24 +1,20 @@
-import React from 'react';
-import SellerLocationItem from './sellerLocationItem';
-
-const SellerLocation = ({ storeLocators }) => {
-    return (
-        <>
-            <div class="w-full flex flex-col items-start gap-[25px]">
-                <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
-                <div class="w-full grid grid-cols-3 gap-4">
-                    {storeLocators && storeLocators.map((value, index) =>
-                        <SellerLocationItem storeLocator={value} />
-                    )}
-                {/* <div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem />
-                    <SellerLocationItem /> */}
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import SellerLocationItem from './sellerLocationItem';
+
+const SellerLocation = () => {
+    return (
+        <>
+            <div class="w-full flex flex-col items-start gap-[25px]">
+                <div class="relative w-fit font-semibold  text-[20px] tracking-[0] leading-[normal]">Our Store</div>
+                <div class="w-full grid xs_grid-cols-1 md_grid-cols-2 xl_grid-cols-3 gap-4">
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                    <SellerLocationItem />
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default SellerLocation;

package/src/components/SellerLocation/sellerLocationItem.js

@@ -1,26 +1,28 @@
-import React from 'react';
-import { Location, Clock } from 'iconsax-react';
-import OperatingHours from '@riosst100/pwa-marketplace/src/components/OperatingHours';
-import SellerAddressCard from '@riosst100/pwa-marketplace/src/components/Seller/sellerAddressCard';
-
-const SellerLocationItem = ({ storeLocator }) => {
-    return (
-        <>
-            <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
-                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">{storeLocator ? storeLocator.name : ''}</div>
-                <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
-                    <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
-                    <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]"><SellerAddressCard address={storeLocator} /></div>
-                </div>
-                <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
-                    <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
-                        <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
-                        {storeLocator ? <OperatingHours values={storeLocator.operating_hours} /> : ''}
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import { Location, Clock } from 'iconsax-react';
+
+const SellerLocationItem = () => {
+    return (
+        <>
+            <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
+                <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[16px] tracking-[0] leading-[normal]">Zen Market Kitchener</div>
+                <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
+                    <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
+                    <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[normal]">180 Kitchener Rd, Singapura</div>
+                </div>
+                <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
+                    <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
+                        <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
+                        <p class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px] whitespace-nowrap">Monday - Friday 9 AM - 5 PM</p>
+                    </div>
+                    <p class="relative w-[292px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px]">
+                        Saturday 11 AM - 3 PM<br />
+                        Sunday Close
+                    </p>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default SellerLocationItem;

package/src/components/SellerPage/sellerPage.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
-
-const SellerPage = () => {
-    return (
-        <Seller />
-    )
-}
-
+import React from 'react';
+import Seller from '@riosst100/pwa-marketplace/src/components/Seller/seller';
+
+const SellerPage = () => {
+    return (
+        <Seller />
+    )
+}
+
 export default SellerPage;

package/src/components/SellerProducts/sellerProducts.js

@@ -1,67 +1,47 @@
-import React from 'react';
-import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
-import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
-import Search from '@riosst100/pwa-marketplace/src/components/Search';
-import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
-import Pagination from '..//Pagination';
-import { Link } from "react-router-dom";
-
-    return (
-        <>
-            <div className='w-full mb-[30px]'>
-                <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
-                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
-                    </Link>
-                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
-                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
-                    </Link>
-                </div>
-            </div>
-            <div className='w-full flex items-start gap-x-[30px]'>
-                <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
-                    <Filter />
-                </div>
-                <div className='flex flex-col gap-y-[30px]'>
-                    <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
-                        <Search />
-                        <SortBy />
-                    </div>
-                    <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
-                        <ProductItem />
-                    </div>
-                    <div className='pagination-container w-full flex justify-center'>
-                        <Pagination />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
-export default SellerProducts;
-
-SellerProducts.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
-};
+import React from 'react';
+import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
+import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
+import Search from '@riosst100/pwa-marketplace/src/components/Search';
+import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
+import Pagination from '..//Pagination';
+import { Link } from "react-router-dom";
+
+const SellerProducts = () => {
+    return (
+        <>
+            <div className='w-full mb-[30px]'>
+                <div class='flex items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-gray-100'>
+                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
+                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</span>
+                    </Link>
+                    <Link to='#' class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
+                        <span class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</span>
+                    </Link>
+                </div>
+            </div>
+            <div className='w-full flex items-start gap-x-[30px]'>
+                <div className='xs_hidden xl_block filter-container w-full max-w-[240px]'>
+                    <Filter />
+                </div>
+                <div className='flex flex-col gap-y-[30px]'>
+                    <div className='flex xs_flex-wrap gap-y-4 w-full items-center justify-between'>
+                        <Search />
+                        <SortBy />
+                    </div>
+                    <div className='product-list w-full grid xs_grid-cols-2 md_grid-cols-3 lg_grid-cols-4 gap-4'>
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                        <ProductItem />
+                    </div>
+                    <div className='pagination-container w-full flex justify-center'>
+                        <Pagination />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default SellerProducts;

package/src/components/SellerReview/index.js

@@ -1 +1 @@
-export { default } from './sellerReview';
+export { default } from './sellerReview';

package/src/components/SellerReview/sellerReview.js

@@ -1,144 +1,144 @@
-import React from 'react';
-import SellerReviewItem from '../SellerReviewItem';
-import Pagination from '../Pagination';
-import { Star1 } from 'iconsax-react';
-
-const SellerReview = () => {
-    return (
-        <>
-            <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
-                <div className="w-full xs_max-w-full lg_max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
-                    <div className="justify-start items-end gap-[15px] inline-flex">
-                        <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
-                        <div className="flex-col justify-start items-start gap-[9px] inline-flex">
-                            <div className="justify-start items-start gap-1.5 inline-flex">
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                </div>
-                                <div className="w-3.5 h-3.5 relative">
-                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
-                                </div>
-                            </div>
-                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
-                        </div>
-                    </div>
-                    <div className="w-full flex-col items-start gap-2 flex">
-                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
-                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
-                                <div className="gap-[5px] flex items-center">
-                                    <div className="w-3.5 h-3.5 relative">
-                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    </div>
-                                    <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
-                                    </div>
-                                </div>
-                                <div className="xs_w-full lg_w-40 h-[6px] relative">
-                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
-                                </div>
-                            </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
-                        </div>
-                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
-                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
-                                <div className="gap-[5px] flex items-center">
-                                    <div className="w-3.5 h-3.5 relative">
-                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    </div>
-                                    <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
-                                    </div>
-                                </div>
-                                <div className="xs_w-full lg_w-40 h-[6px] relative">
-                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
-                                </div>
-                            </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
-                        </div>
-                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
-                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
-                                <div className="gap-[5px] flex items-center">
-                                    <div className="w-3.5 h-3.5 relative">
-                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    </div>
-                                    <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
-                                    </div>
-                                </div>
-                                <div className="xs_w-full lg_w-40 h-[6px] relative">
-                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
-                                </div>
-                            </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
-                        </div>
-                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
-                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
-                                <div className="gap-[5px] flex items-center">
-                                    <div className="w-3.5 h-3.5 relative">
-                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    </div>
-                                    <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
-                                    </div>
-                                </div>
-                                <div className="xs_w-full lg_w-40 h-[6px] relative">
-                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
-                                </div>
-                            </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
-                        </div>
-                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
-                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
-                                <div className="gap-[5px] flex items-center">
-                                    <div className="w-3.5 h-3.5 relative">
-                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
-                                    </div>
-                                    <div className="gap-2.5 flex">
-                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
-                                    </div>
-                                </div>
-                                <div className="xs_w-full lg_w-40 h-[6px] relative">
-                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
-                                    <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
-                                </div>
-                            </div>
-                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
-                        </div>
-                    </div>
-                    <div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
-                        <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
-                    </div>
-                </div>
-                <div className='flex flex-col w-full'>
-                    <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                        <SellerReviewItem />
-                    </div>
-                    <div className='pagination-container w-full flex justify-center'>
-                        <Pagination />
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
-
+import React from 'react';
+import SellerReviewItem from '../SellerReviewItem';
+import Pagination from '../Pagination';
+import { Star1 } from 'iconsax-react';
+
+const SellerReview = () => {
+    return (
+        <>
+            <div className='w-full flex items-start xs_flex-col lg_flex-row gap-[30px] '>
+                <div className="w-full xs_max-w-full lg_max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
+                    <div className="justify-start items-end gap-[15px] inline-flex">
+                        <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
+                        <div className="flex-col justify-start items-start gap-[9px] inline-flex">
+                            <div className="justify-start items-start gap-1.5 inline-flex">
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                </div>
+                                <div className="w-3.5 h-3.5 relative">
+                                    <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
+                                </div>
+                            </div>
+                            <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
+                        </div>
+                    </div>
+                    <div className="w-full flex-col items-start gap-2 flex">
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
+                                <div className="gap-[5px] flex items-center">
+                                    <div className="w-3.5 h-3.5 relative">
+                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    </div>
+                                    <div className="gap-2.5 flex">
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">5</div>
+                                    </div>
+                                </div>
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
+                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
+                                    <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
+                                </div>
+                            </div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">12</div>
+                        </div>
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
+                                <div className="gap-[5px] flex items-center">
+                                    <div className="w-3.5 h-3.5 relative">
+                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    </div>
+                                    <div className="gap-2.5 flex">
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">4</div>
+                                    </div>
+                                </div>
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
+                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
+                                    <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                </div>
+                            </div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">8</div>
+                        </div>
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
+                                <div className="gap-[5px] flex items-center">
+                                    <div className="w-3.5 h-3.5 relative">
+                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    </div>
+                                    <div className="gap-2.5 flex">
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">3</div>
+                                    </div>
+                                </div>
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
+                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
+                                    <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                </div>
+                            </div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">5</div>
+                        </div>
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
+                                <div className="gap-[5px] flex items-center">
+                                    <div className="w-3.5 h-3.5 relative">
+                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    </div>
+                                    <div className="gap-2.5 flex">
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">2</div>
+                                    </div>
+                                </div>
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
+                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
+                                    <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                </div>
+                            </div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">1</div>
+                        </div>
+                        <div className="flex xs_w-full lg_w-fit gap-3 items-center">
+                            <div className="gap-2.5 flex items-center xs_w-full lg_w-fit">
+                                <div className="gap-[5px] flex items-center">
+                                    <div className="w-3.5 h-3.5 relative">
+                                        <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
+                                    </div>
+                                    <div className="gap-2.5 flex">
+                                        <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">1</div>
+                                    </div>
+                                </div>
+                                <div className="xs_w-full lg_w-40 h-[6px] relative">
+                                    <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
+                                    <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
+                                </div>
+                            </div>
+                            <div className="w-10 text-zinc-900 text-sm font-normal leading-[18px]">0</div>
+                        </div>
+                    </div>
+                    <div className="xs_self-end lg_self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
+                        <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
+                    </div>
+                </div>
+                <div className='flex flex-col w-full'>
+                    <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                        <SellerReviewItem />
+                    </div>
+                    <div className='pagination-container w-full flex justify-center'>
+                        <Pagination />
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
 export default SellerReview;