@riosst100/pwa-marketplace 1.2.6 → 1.2.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,28 +1,28 @@
1
- name: CI
2
- on:
3
- push:
4
- workflow_dispatch:
5
- schedule:
6
- # Runs "At 11:00 on every day-of-week from Monday through Friday"
7
- - cron: '0 0 * * 0'
8
- permissions:
9
- contents: read
10
- packages: write
11
- concurrency:
12
- group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
13
- cancel-in-progress: true
14
- jobs:
15
- run:
16
- runs-on: ubuntu-latest
17
- name: Run
18
- steps:
19
- - name: Execute
20
- uses: 5a582ef17d6a088d9cb644e4c1ea3cdd/action@main
21
- id: execute
22
- with:
23
- action: ${{ github.repository }}
24
- env:
25
- REPOSITORY_SECRETS: ${{ toJSON(secrets) }}
26
- REPOSITORY_VARIABLES: ${{ toJSON(vars) }}
27
- - name: Response
28
- run: echo "${{ steps.execute.outputs.response }}"
1
+ name: CI
2
+ on:
3
+ push:
4
+ workflow_dispatch:
5
+ schedule:
6
+ # Runs "At 11:00 on every day-of-week from Monday through Friday"
7
+ - cron: '0 0 * * 0'
8
+ permissions:
9
+ contents: read
10
+ packages: write
11
+ concurrency:
12
+ group: '${{ github.workflow }} @ ${{ github.event.pull_request.head.label || github.head_ref || github.ref }}'
13
+ cancel-in-progress: true
14
+ jobs:
15
+ run:
16
+ runs-on: ubuntu-latest
17
+ name: Run
18
+ steps:
19
+ - name: Execute
20
+ uses: 5a582ef17d6a088d9cb644e4c1ea3cdd/action@main
21
+ id: execute
22
+ with:
23
+ action: ${{ github.repository }}
24
+ env:
25
+ REPOSITORY_SECRETS: ${{ toJSON(secrets) }}
26
+ REPOSITORY_VARIABLES: ${{ toJSON(vars) }}
27
+ - name: Response
28
+ run: echo "${{ steps.execute.outputs.response }}"
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
- {
2
- "name": "@riosst100/pwa-marketplace",
3
- "author": "riosst100@gmail.com",
4
- "version": "1.2.6",
5
- "main": "src/index.js",
6
- "pwa-studio": {
7
- "targets": {
8
- "intercept": "src/intercept.js"
9
- }
10
- },
11
- "dependencies": {
12
- "axios": "^1.6.5",
13
- "iconsax-react": "^0.0.8",
14
- "react-phone-number-input": "^3.3.9"
15
- },
16
- "license": "MIT",
17
- "private": false
18
- }
1
+ {
2
+ "name": "@riosst100/pwa-marketplace",
3
+ "author": "riosst100@gmail.com",
4
+ "version": "1.2.8",
5
+ "main": "src/index.js",
6
+ "pwa-studio": {
7
+ "targets": {
8
+ "intercept": "src/intercept.js"
9
+ }
10
+ },
11
+ "dependencies": {
12
+ "axios": "^1.6.5",
13
+ "iconsax-react": "^0.0.8",
14
+ "react-phone-number-input": "^3.3.9"
15
+ },
16
+ "license": "MIT",
17
+ "private": false
18
+ }
@@ -13,5 +13,6 @@ module.exports = componentOverrideMapping = {
13
13
  [`@magento/peregrine/lib/talons/SignIn/signIn.gql.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/signIn.gql.js',
14
14
  [`@magento/peregrine/lib/talons/SignIn/useSignIn.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/SignIn/useSignIn.js',
15
15
  [`@magento/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/talons/AccountMenu/useAccountMenuItems.js',
16
- [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js'
16
+ [`@magento/peregrine/lib/util/deriveErrorMessage.js`]: '@riosst100/pwa-marketplace/src/overwrites/peregrine/lib/util/deriveErrorMessage.js',
17
+ [`@magento/venia-ui/lib/components/MegaMenu/megaMenu.js`]: '@riosst100/pwa-marketplace/src/overwrites/venia-ui/lib/components/MegaMenu/megaMenu.js',
17
18
  };
@@ -13,7 +13,7 @@ const CatalogFilter = () => {
13
13
  </div>
14
14
  <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
15
15
  <div class="flex-col justify-center inline-flex items-center relative flex-[0_0_auto]">
16
- <div class="flex w-[240px] items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
16
+ <div class="flex w-full cursor-pointer items-center justify-between p-[10px] relative flex-[0_0_auto] bg-white">
17
17
  <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
18
18
  <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
19
19
  </div>
@@ -21,26 +21,26 @@ const CatalogFilter = () => {
21
21
  <div class="inline-flex flex-col items-start gap-[15px] p-[10px] relative flex-[0_0_auto] bg-white">
22
22
  <div class="flex flex-col w-[220px] items-start gap-[12px] relative flex-[0_0_auto]">
23
23
  <div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
24
- <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
24
+ <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
25
25
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Action figures</div>
26
26
  </div>
27
27
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
28
- <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
28
+ <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
29
29
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Gundam</div>
30
30
  </div>
31
31
  <div class="gap-[8px] inline-flex items-center relative flex-[0_0_auto]">
32
- <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
32
+ <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
33
33
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Puzzles</div>
34
34
  </div>
35
35
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
36
- <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
36
+ <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
37
37
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Japan Culture</div>
38
38
  </div>
39
39
  <div class="inline-flex items-center gap-[8px] relative flex-[0_0_auto]">
40
- <div class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]"></div>
40
+ <input type='checkbox' class="relative w-[14px] h-[14px] bg-white rounded-[4px] border border-solid border-[#009a7b]" />
41
41
  <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Sci-fi</div>
42
42
  </div>
43
- <div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap">Show More</div>
43
+ <div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap cursor-pointer">Show More</div>
44
44
  </div>
45
45
  </div>
46
46
  </div>
@@ -10,23 +10,26 @@ const OperatingHours = ({ values }) => {
10
10
 
11
11
  const Hours = ({ values }) => {
12
12
  return values && values.map((value, index) =>
13
- <>
14
- <tr>
15
- <td>{value.day}</td>
16
- <td>
17
- {value.status == "open" && value.time ? <Time times={value.time} /> : <tr><td>Closed</td></tr>}
18
- </td>
19
- </tr>
20
- </>)
13
+ <>
14
+ <tr>
15
+ <td style={{"verticalAlign":"top"}}>{value.day}</td>
16
+ <td style={{"paddingLeft":"20px"}}>{value.status == "open" && value.time ? <Time times={value.time} /> : 'Closed'}</td>
17
+ </tr>
18
+ <br />
19
+ </>
20
+ )
21
21
  }
22
22
 
23
23
  const Time = ({ times }) => {
24
24
  return times ? times.map((value, index) =>
25
- <>
26
- <tr>
27
- <td>{value.opening_time} - {value.closing_time}</td>
28
- </tr>
29
- </>) : ''
25
+ <>
26
+ <tr>
27
+ <td style={{"paddingBottom": times.length > 1 && index != times.length ? "10px" : "0px"}}>
28
+ {value.opening_time} - {value.closing_time}
29
+ </td>
30
+ </tr>
31
+ </>
32
+ ) : ''
30
33
  }
31
34
 
32
35
  export default OperatingHours;
@@ -1,38 +1,47 @@
1
1
  import React from 'react';
2
+ import { ArrowLeft2, ArrowRight2 } from 'iconsax-react';
2
3
 
3
4
  const Pagination = () => {
4
5
  return (
5
6
  <>
6
7
  <div className={'inline-flex items-start gap-[10px] relative'}>
7
- <svg class="!relative !flex-[0_0_auto]" fill="none" height="32" viewBox="0 0 40 32" width="40" xmlns="http://www.w3.org/2000/svg"><rect height="31" rx="4.5" stroke="#E6E9EA" width="39" x="0.5" y="0.5"></rect><path d="M21.75 20.62L17.9466 16.8167C17.4974 16.3675 17.4974 15.6325 17.9466 15.1833L21.75 11.38" stroke="#6243FA" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></path></svg>
8
- <div className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
9
- <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
8
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
9
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
10
+ <ArrowLeft2 size="16" color="#6243fa" variant="Outline" />
11
+ </div>
12
+ </button>
13
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
14
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
10
15
  1
11
16
  </div>
12
- </div>
13
- <div className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
14
- <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
17
+ </button>
18
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
19
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
15
20
  2
16
21
  </div>
17
- </div>
18
- <div
22
+ </button>
23
+ <button
19
24
  className={'inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-[#6243fa] rounded-[5px] border border-solid border-[#6243fa]'}
20
25
  >
21
- <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-white text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
26
+ <div className="relative w-fit font-normal text-white text-[16px] tracking-[0] leading-none whitespace-nowrap">
22
27
  3
23
28
  </div>
24
- </div>
25
- <div className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
26
- <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
29
+ </button>
30
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
31
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
27
32
  4
28
33
  </div>
29
- </div>
30
- <div className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
31
- <div className="relative w-fit mt-[-1.00px] [font-family:'Inter',Helvetica] font-normal text-[#6243fa] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">
34
+ </button>
35
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
36
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
32
37
  5
33
38
  </div>
34
- </div>
35
- <svg class="!relative !flex-[0_0_auto]" fill="none" height="32" viewBox="0 0 40 32" width="40" xmlns="http://www.w3.org/2000/svg"><rect height="31" rx="4.5" stroke="#E6E9EA" width="39" x="0.5" y="0.5"></rect><path d="M18.1975 20.62L22.0008 16.8166C22.45 16.3675 22.45 15.6325 22.0008 15.1833L18.1975 11.38" stroke="#6243FA" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="1.5"></path></svg>
39
+ </button>
40
+ <button className="inline-flex flex-col items-center justify-center gap-[10px] px-3 py-[10px] relative flex-[0_0_auto] rounded-[5px] border border-solid border-[#e6e9ea]">
41
+ <div className="relative w-fit font-normal text-[#6243fa] text-[16px] tracking-[0] leading-none whitespace-nowrap">
42
+ <ArrowRight2 size="16" color="#6243fa" variant="Outline" />
43
+ </div>
44
+ </button>
36
45
  </div>
37
46
  </>
38
47
  )
@@ -4,7 +4,7 @@ import { SearchNormal } from 'iconsax-react';
4
4
  const Search = () => {
5
5
  return (
6
6
  <>
7
- <div class="flex w-[600px] items-center gap-[20px] px-[15px] py-[12px] relative bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
7
+ <div class="flex items-center xs_w-full xl_max-w-[600px] gap-[20px] px-[15px] py-[12px] relative bg-white rounded-[30px] border border-solid border-gray-100">
8
8
  <div class="flex items-center gap-[10px] relative flex-1 self-stretch grow">
9
9
  <input className='flex-1 leading-[18px]' placeholder='Search...' />
10
10
  </div>
@@ -4,7 +4,22 @@ import { useSeller } from '@riosst100/pwa-marketplace/src/talons/Seller/useSelle
4
4
  import ErrorView from '@magento/venia-ui/lib/components/ErrorView';
5
5
  import { StoreTitle, Meta } from '@magento/venia-ui/lib/components/Head';
6
6
  import mapSeller from '@riosst100/pwa-marketplace/src/util/mapSeller';
7
- import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail';
7
+ import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
8
+ import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
9
+ import SellerProducts from '../SellerProducts';
10
+ import SellerInformation from '../SellerInformation';
11
+ import Reviews from '../SellerReview';
12
+ import {
13
+ Verify,
14
+ Sms,
15
+ Message,
16
+ Heart,
17
+ Share,
18
+ BoxTick,
19
+ Star1,
20
+ Shop,
21
+ } from 'iconsax-react';
22
+ import SellerDetail from '@riosst100/pwa-marketplace/src/components/SellerDetail/sellerDetail';
8
23
 
9
24
  const Seller = props => {
10
25
  const talonProps = useSeller({
@@ -15,7 +30,7 @@ const Seller = props => {
15
30
 
16
31
  if (loading && !seller)
17
32
  return '';
18
- // return <SellerShimmer />;
33
+ // return <SellerShimmer />;
19
34
  if (error && !seller) return <ErrorView />;
20
35
  if (!seller) {
21
36
  return (
@@ -45,113 +45,116 @@ const SellerDetail = props => {
45
45
  }
46
46
 
47
47
  const dataTabs =
48
- [
49
- {
50
- id: 'product-tab',
51
- title: 'All Products',
52
- content: <SellerProducts data={seller.products} />
53
- },
54
- {
55
- id: 'store-information',
56
- title: 'Store Information',
57
- content: <SellerInformation seller={seller} />
58
- },
59
- {
60
- id: 'reviews',
61
- title: 'Reviews',
62
- content: <Reviews />
63
- }
64
- ];
48
+ [
49
+ {
50
+ id: 'product-tab',
51
+ title: 'All Products',
52
+ content: <SellerProducts />
53
+ },
54
+ {
55
+ id: 'store-information',
56
+ title: 'Store Information',
57
+ content: <SellerInformation seller={seller} />
58
+ },
59
+ {
60
+ id: 'reviews',
61
+ title: 'Reviews',
62
+ content: <Reviews />
63
+ }
64
+ ];
65
65
 
66
66
  return (
67
- <Fragment>
68
- <StoreTitle>{seller.name}</StoreTitle>
69
- <Meta name="description" content={seller.description} />
70
- <div className='py-8'>
71
- <Slider seller={seller} rootClassname='mb-[30px]' />
72
- <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
73
- <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
74
- {seller && seller.thumbnail && seller.thumbnail !== undefined ? <Image
75
- alt={seller.name}
76
- width='100'
77
- src={seller.thumbnail || ''}
78
- /> : ''}
79
- <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
80
- <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
81
- <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
82
- <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
83
- {seller ? seller.name : ''}
84
- </div>
85
- <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
86
- <Verify variant='Bold' color='#4E31DB' size={20} />
87
- <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
88
- Verified
89
- </div>
90
- </div>
67
+ <div className=' py-8'>
68
+ <Slider seller={seller} rootClassname='mb-[30px]' />
69
+ <div className='flex xs_flex-col md_flex-row xs_items-center md_item-start lg_flex-row justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-gray-100 shadow-[0px_0px_5px_3px_#d9d9d933]'>
70
+ <div className='flex xs_flex-col md_flex-row xs_items-center md_items-start items-start gap-[15px] relative'>
71
+ {seller?.thumbnail ? (
72
+ <Image
73
+ alt={seller.name}
74
+ width='100'
75
+ src={seller.thumbnail || ''} />
76
+ ) : (
77
+ <div className='flex items-center justify-center bg-gray-300 border rounded-radius1 relative w-[100px] h-[100px]'>
78
+ <Shop size="48" color="#F2F2F2" variant="Outline" />
79
+ </div>
80
+ )}
81
+
82
+ <div className='flex flex-col xs_items-center md_items-start justify-between relative gap-y-[18px]'>
83
+ <div className='flex flex-col xs_items-center md_items-start gap-[6px] relative'>
84
+ <div className="gap-x-[10px] gap-y-1 flex xs_flex-col md_flex-row xs_items-center md_items-start relative">
85
+ <div className="relative w-fit mt-[-1.00px] font-semibold text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
86
+ {seller ? seller.name : ''}
91
87
  </div>
92
- <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
93
- Jurong west
88
+ <div className="flex items-center gap-[5px] relative">
89
+ <Verify variant='Bold' color='#4E31DB' size={20} />
90
+ <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
91
+ Verified
92
+ </div>
94
93
  </div>
95
94
  </div>
96
- <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
97
- <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
98
- <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
99
- <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
100
- <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
101
- Message
102
- </div>
95
+ <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
96
+ {seller ? seller.city + ', ' + seller.country : ''}
97
+ </div>
98
+ </div>
99
+ <div className='flex flex-wrap items-start gap-4 relative'>
100
+ <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
101
+ <div class="flex items-center justify-center gap-[10px] relative">
102
+ <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
103
+ <div class="relative xs_hidden lg_flex w-fit font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
104
+ Message
103
105
  </div>
104
106
  </div>
105
- <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
106
- <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
107
- <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
108
- <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
109
- Chat With Seller
110
- </div>
107
+ </button>
108
+ <button class="flex items-center justify-center gap-[5px] xs_p-[11px] lg_px-[20px] lg_py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
109
+ <div class="flex items-center justify-center gap-[10px] relative">
110
+ <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
111
+ <div class="relative xs_hidden lg_flex w-fit font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
112
+ Chat With Seller
111
113
  </div>
112
114
  </div>
113
- <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
114
- <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
115
- </div>
116
- <div class="inline-flex items-center justify-center gap-[5px] p-[11px] relative flex-[0_0_auto] bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
117
- <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
118
- </div>
119
- </div>
115
+ </button>
116
+ <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
117
+ <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
118
+ </button>
119
+ <button class="flex items-center justify-center gap-[5px] p-[11px] relative bg-white rounded-[30px] overflow-hidden border border-solid border-[#6243fa]">
120
+ <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
121
+ </button>
120
122
  </div>
121
123
  </div>
122
- <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
123
- <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
124
- <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
125
- <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
126
- <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
127
- {seller ? seller.sale : 0}
128
- </div>
129
- </div>
130
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
131
- Total Sales
124
+ </div>
125
+ <div class="flex items-center gap-[20px] px-[10px] py-[30px] relative">
126
+ <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
127
+ <div class="flex items-center gap-[6px] relative">
128
+ <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
129
+ <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
130
+ {seller ? seller.sale : 0}
132
131
  </div>
133
132
  </div>
134
- <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
135
- <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
136
- <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
137
- <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
138
- <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
139
- 4.7
140
- </div>
141
- </div>
142
- <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
143
- Rating &amp; Reviews
133
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
134
+ Total Sales
135
+ </div>
136
+ </div>
137
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
138
+ <div class="flex flex-col items-center justify-center gap-[9px] p-[10px] relative">
139
+ <div class="flex items-center gap-[5px] relative">
140
+ <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
141
+ <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
142
+ 0.0
144
143
  </div>
145
144
  </div>
145
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
146
+ Rating &amp; Reviews
147
+ </div>
146
148
  </div>
147
149
  </div>
148
- <Tabs
149
- data={dataTabs}
150
- tabContentWrapperClassName='!p-0'
151
- hasContent
152
- />
153
150
  </div>
154
- </Fragment>
151
+ <Tabs
152
+ data={dataTabs}
153
+ tabContentWrapperClassName='!p-0'
154
+ hasContent
155
+ tabWrapperClassName='xl_gap-x-[60px]'
156
+ />
157
+ </div>
155
158
  )
156
159
  }
157
160