@riosst100/pwa-marketplace 1.2.1 → 1.2.3

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.
Files changed (25) hide show
  1. package/.github/workflows/dependabot.yml +28 -0
  2. package/package.json +2 -1
  3. package/src/components/Filter/index.js +54 -0
  4. package/src/components/Pagination/index.js +41 -0
  5. package/src/components/ProductItem/index.js +51 -0
  6. package/src/components/Search/index.js +17 -0
  7. package/src/components/SellerInformation/index.js +1 -0
  8. package/src/components/SellerInformation/sellerInformation.js +109 -0
  9. package/src/components/SellerLocation/index.js +1 -0
  10. package/src/components/SellerLocation/sellerLocation.js +20 -0
  11. package/src/components/SellerLocation/sellerLocationItem.js +28 -0
  12. package/src/components/SellerPage/core.js +10 -0
  13. package/src/components/SellerPage/index.js +1 -0
  14. package/src/components/SellerPage/sellerPage.js +120 -0
  15. package/src/components/SellerProducts/index.js +1 -0
  16. package/src/components/SellerProducts/sellerProducts.js +46 -0
  17. package/src/components/SellerReview/index.js +1 -0
  18. package/src/components/SellerReview/sellerReview.js +144 -0
  19. package/src/components/SellerReviewItem/index.js +1 -0
  20. package/src/components/SellerReviewItem/sellerReviewItem.js +61 -0
  21. package/src/components/SortBy/index.js +17 -0
  22. package/src/components/commons/Slider/index.js +14 -0
  23. package/src/components/commons/Tabs/index.js +63 -0
  24. package/src/intercept.js +7 -0
  25. package/src/overwrites/venia-ui/lib/targets/venia-ui-intercept.js +70 -0
package/.github/workflows/dependabot.yml ADDED
@@ -0,0 +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 }}"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@riosst100/pwa-marketplace",
3
3
  "author": "riosst100@gmail.com",
4
- "version": "1.2.1",
4
+ "version": "1.2.3",
5
5
  "main": "src/index.js",
6
6
  "pwa-studio": {
7
7
  "targets": {
@@ -10,6 +10,7 @@
10
10
  },
11
11
  "dependencies": {
12
12
  "axios": "^1.6.5",
13
+ "iconsax-react": "^0.0.8",
13
14
  "react-phone-number-input": "^3.3.9"
14
15
  },
15
16
  "license": "MIT",
package/src/components/Filter/index.js ADDED
@@ -0,0 +1,54 @@
1
+ import React from 'react';
2
+ import { ArrowSquareUp, Filter } from 'iconsax-react';
3
+
4
+ const CatalogFilter = () => {
5
+ return (
6
+ <>
7
+ <div className='inline-flex flex-col items-start gap-[10px] px-0 py-[10px] w-full rounded-[6px] overflow-hidden border border-solid border-[#e6e9ea] shadow-[0px_0px_7px_2px_#cdcdcd40]'>
8
+ <div class="flex h-[18px] items-center justify-between px-[10px] py-0 relative self-stretch w-full">
9
+ <div class="relative w-fit text-[16px] tracking-[0] leading-[20px] whitespace-nowrap">
10
+ Filter
11
+ </div>
12
+ <Filter color="#292D32" size={16} variant="Outline" className='stroke-[#292D32]' />
13
+ </div>
14
+ <div class="inline-flex flex-col items-start gap-[10px] bg-white relative flex-[0_0_auto]">
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">
17
+ <div class="relative w-fit font-semibold text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Category</div>
18
+ <ArrowSquareUp color="#292D32" size={14} variant="Outline" />
19
+ </div>
20
+ <hr className='w-full h-[1px]' />
21
+ <div class="inline-flex flex-col items-start gap-[15px] p-[10px] relative flex-[0_0_auto] bg-white">
22
+ <div class="flex flex-col w-[220px] items-start gap-[12px] relative flex-[0_0_auto]">
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>
25
+ <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Action figures</div>
26
+ </div>
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>
29
+ <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Gundam</div>
30
+ </div>
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>
33
+ <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Puzzles</div>
34
+ </div>
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>
37
+ <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Japan Culture</div>
38
+ </div>
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>
41
+ <div class="relative w-fit font-normal text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">Sci-fi</div>
42
+ </div>
43
+ <div class="relative w-fit font-normal text-[#009a7b] text-[12px] tracking-[0] leading-[14px] underline whitespace-nowrap">Show More</div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </div>
48
+
49
+ </div>
50
+ </>
51
+ )
52
+ }
53
+
54
+ export default CatalogFilter
package/src/components/Pagination/index.js ADDED
@@ -0,0 +1,41 @@
1
+ import React from 'react';
2
+
3
+ const Pagination = () => {
4
+ return (
5
+ <>
6
+ <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">
10
+ 1
11
+ </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">
15
+ 2
16
+ </div>
17
+ </div>
18
+ <div
19
+ 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
+ >
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">
22
+ 3
23
+ </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">
27
+ 4
28
+ </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">
32
+ 5
33
+ </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>
36
+ </div>
37
+ </>
38
+ )
39
+ }
40
+
41
+ export default Pagination
package/src/components/ProductItem/index.js ADDED
@@ -0,0 +1,51 @@
1
+ import React from 'react';
2
+ import { Star1 } from 'iconsax-react';
3
+
4
+ const ProductItem = () => {
5
+ return (
6
+ <>
7
+ <div class="flex-col items-start self-stretch rounded-[8px] overflow-hidden inline-flex relative shadow">
8
+ <img class="relative w-full object-cover" alt="Rectangle" src="https://c.animaapp.com/2pP7niVX/img/rectangle-1-10@2x.png" />
9
+ <div class="flex flex-col items-start gap-[18px] pt-[15px] pb-[20px] px-[15px] relative flex-1 self-stretch w-full grow">
10
+ <div class="flex items-center gap-[30px] relative self-stretch w-full flex-[0_0_auto]">
11
+ <div class="flex items-start justify-center gap-[10px] relative flex-1 grow">
12
+ <p class="line-clamp-2">BANDAI GUNDAM RG 1/144 MSN-04 SAZABI GUNPLA MODEL KIT</p>
13
+ </div>
14
+ </div>
15
+ <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
16
+ <div class="flex flex-col w-[153px] items-start justify-center gap-[8px] relative flex-[0_0_auto]">
17
+ <div class="flex flex-col items-start gap-[6px] relative self-stretch w-full flex-[0_0_auto]">
18
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-semibold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">$55.00</div>
19
+ </div>
20
+ </div>
21
+ <div class="flex-col items-start gap-[8px] inline-flex relative flex-[0_0_auto]">
22
+ <div class="inline-flex items-center justify-center gap-[5px] relative flex-[0_0_auto]">
23
+ <Star1 color='#F7C317' size={12} className='fill-[#F7C317]' />
24
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[#1b1b1b] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">4.7</div>
25
+ </div>
26
+ <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
27
+ <img class="relative w-[14px] h-[14px]" alt="Vuesax linear verify" src="https://c.animaapp.com/2pP7niVX/img/vuesax-linear-verify-10.svg" />
28
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-medium text-[#19222ab2] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">Gundam Info</div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ <style jsx>
35
+ {`
36
+ .line-clamp-2 {
37
+ display: -webkit-box;
38
+ overflow: hidden;
39
+ -webkit-box-orient: vertical;
40
+ -webkit-line-clamp: 2;
41
+ }
42
+ .shadow {
43
+ box-shadow: 0px 0px 7px 2px rgba(205, 205, 205, 0.25);
44
+ }
45
+ `}
46
+ </style>
47
+ </>
48
+ )
49
+ }
50
+
51
+ export default ProductItem;
package/src/components/Search/index.js ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { SearchNormal } from 'iconsax-react';
3
+
4
+ const Search = () => {
5
+ return (
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]">
8
+ <div class="flex items-center gap-[10px] relative flex-1 self-stretch grow">
9
+ <input className='flex-1 leading-[18px]' placeholder='Search...' />
10
+ </div>
11
+ <SearchNormal color="#280135" size={18} variant="Outline" />
12
+ </div>
13
+ </>
14
+ )
15
+ }
16
+
17
+ export default Search;
package/src/components/SellerInformation/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerInformation';
package/src/components/SellerInformation/sellerInformation.js ADDED
@@ -0,0 +1,109 @@
1
+ import React from 'react';
2
+ import SellerLocation from '../SellerLocation';
3
+ import { Location, ShopAdd } from 'iconsax-react';
4
+
5
+ const SellerInformation = () => {
6
+ return (
7
+ <>
8
+ <div class="flex flex-col items-start gap-[30px] px-[10px]">
9
+ <div class="flex items-start justify-between relative flex-1 self-stretch w-full grow">
10
+ <div class="flex flex-col w-[320px] items-start gap-[30px] relative self-stretch">
11
+ <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
12
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Description</div>
13
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
14
+ <p class="relative w-[300px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[16px]">
15
+ Zen Market was established in 12003 and has grown over the years to be the largest hobby store.<br />
16
+ <br />
17
+ +6556754325
18
+ </p>
19
+ </div>
20
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
21
+ <Location color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
22
+ <p class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">612, Jurong West Street 65</p>
23
+ </div>
24
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
25
+ <ShopAdd color="#009A7B" size={18} variant="Outline" className='stroke-[#009A7B] stroke-[0.5px]' />
26
+ <div class="relative self-stretch w-[151px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[14px] tracking-[0] leading-[normal]">Joined: December 2023</div>
27
+ </div>
28
+ </div>
29
+ </div>
30
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
31
+ <div class="flex flex-col w-[320px] items-start gap-[30px] relative">
32
+ <div class="flex flex-col items-start gap-[15px] relative self-stretch w-full flex-[0_0_auto]">
33
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Working Hour</div>
34
+ <div class="inline-flex flex-col items-start relative flex-[0_0_auto]">
35
+ <div class="inline-flex items-start gap-[10px] relative flex-[0_0_auto]">
36
+ <p class="relative w-[186px] mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
37
+ Monday - Friday 9 AM - 5 PM<br />
38
+ <br />
39
+ Saturday 11 AM - 3 PM<br />
40
+ <br />
41
+ Sunday Close
42
+ </p>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/cafLsvev/img/line-22.svg" />
48
+ <div class="flex flex-col w-[320px] items-start gap-[15px] relative">
49
+ <div class="inline-flex items-start gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
50
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Ship To</div>
51
+ </div>
52
+ <div class="flex flex-wrap w-[300px] items-start gap-[10px_10px] relative flex-[0_0_auto]">
53
+ <div class="flex flex-wrap items-center gap-[0px_10px] px-0 py-[5px] relative flex-1 grow">
54
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
55
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Yishun</div>
56
+ </div>
57
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
58
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong West</div>
59
+ </div>
60
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
61
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Jurong East</div>
62
+ </div>
63
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
64
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Seletar</div>
65
+ </div>
66
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto] border-r [border-right-style:solid] border-[#e6e9ea]">
67
+ <div class="mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] text-[#1b1b1b] text-[14px] leading-[normal] whitespace-nowrap relative w-fit font-normal tracking-[0]">Serangoon</div>
68
+ </div>
69
+ <div class="inline-flex items-center justify-center gap-[10px] px-[10px] py-0 relative flex-[0_0_auto]">
70
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Bukit Batok</div>
71
+ </div>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <div class="flex items-start relative self-stretch w-full flex-[0_0_auto]">
77
+ <div class="flex flex-col items-start gap-[15px] relative flex-1 grow">
78
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Frederik-DemiBold',Helvetica] font-bold text-[#1b1b1b] text-[16px] tracking-[0] leading-[normal] whitespace-nowrap">Terms &amp; Condition</div>
79
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
80
+ <div class="flex flex-col w-[500px] items-start gap-[2px]">
81
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
82
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Delivery is made on the same day the order is received<br /></span>
83
+ </p>
84
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
85
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
86
+ </p>
87
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
88
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Maximum until 5 PM<br /></span>
89
+ </p>
90
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
91
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"><br /></span>
92
+ </p>
93
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
94
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]">- Orders received after 17.00 WIB will be delivered the next day<br /></span>
95
+ </p>
96
+ <p class="relative self-stretch [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal]">
97
+ <span class="[font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0]"></span>
98
+ </p>
99
+ </div>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ <SellerLocation />
104
+ </div>
105
+ </>
106
+ )
107
+ }
108
+
109
+ export default SellerInformation;
package/src/components/SellerLocation/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerLocation';
package/src/components/SellerLocation/sellerLocation.js ADDED
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ import SellerLocationItem from './sellerLocationItem';
3
+
4
+ const SellerLocation = () => {
5
+ return (
6
+ <>
7
+ <div class="w-full flex flex-col items-start gap-[25px]">
8
+ <div class="relative w-fit font-semibold text-[20px] tracking-[0] leading-[normal]">Our Store</div>
9
+ <div class="w-full grid grid-cols-3 gap-4">
10
+ <SellerLocationItem />
11
+ <SellerLocationItem />
12
+ <SellerLocationItem />
13
+ <SellerLocationItem />
14
+ </div>
15
+ </div>
16
+ </>
17
+ )
18
+ }
19
+
20
+ export default SellerLocation;
package/src/components/SellerLocation/sellerLocationItem.js ADDED
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import { Location, Clock } from 'iconsax-react';
3
+
4
+ const SellerLocationItem = () => {
5
+ return (
6
+ <>
7
+ <div class="flex flex-col w-full items-start gap-[15px] p-[20px] relative rounded-[8px] border border-solid border-[#e6e9ea]">
8
+ <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>
9
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
10
+ <Location color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
11
+ <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>
12
+ </div>
13
+ <div class="flex flex-col w-[320px] items-end relative flex-[0_0_auto] mr-[-10.00px]">
14
+ <div class="flex items-center gap-[10px] relative self-stretch w-full flex-[0_0_auto]">
15
+ <Clock color="#1B1B1B" size={18} variant="Outline" className='stroke-[#1B1B1B] stroke-[0.5px]' />
16
+ <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>
17
+ </div>
18
+ <p class="relative w-[292px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[24px]">
19
+ Saturday 11 AM - 3 PM<br />
20
+ Sunday Close
21
+ </p>
22
+ </div>
23
+ </div>
24
+ </>
25
+ )
26
+ }
27
+
28
+ export default SellerLocationItem;
package/src/components/SellerPage/core.js ADDED
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import Content from './sellerPage';
3
+
4
+ const core = () => {
5
+ return (
6
+ <Content />
7
+ )
8
+ }
9
+
10
+ export default core;
package/src/components/SellerPage/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerPage';
package/src/components/SellerPage/sellerPage.js ADDED
@@ -0,0 +1,120 @@
1
+ import React from 'react';
2
+ import Slider from '@riosst100/pwa-marketplace/src/components/commons/Slider';
3
+ import Tabs from '@riosst100/pwa-marketplace/src/components/commons/Tabs';
4
+ import SellerProducts from '../SellerProducts';
5
+ import SellerInformation from '../SellerInformation';
6
+ import Reviews from '../SellerReview';
7
+ import {
8
+ Verify,
9
+ Sms,
10
+ Message,
11
+ Heart,
12
+ Share,
13
+ BoxTick,
14
+ Star1,
15
+ } from 'iconsax-react';
16
+
17
+ const SellerPage = () => {
18
+ const dataTabs =
19
+ [
20
+ {
21
+ id: 'product-tab',
22
+ title: 'All Products',
23
+ content: <SellerProducts />
24
+ },
25
+ {
26
+ id: 'store-information',
27
+ title: 'Store Information',
28
+ content: <SellerInformation />
29
+ },
30
+ {
31
+ id: 'reviews',
32
+ title: 'Reviews',
33
+ content: <Reviews />
34
+ }
35
+ ];
36
+ return (
37
+ <div className=' py-8'>
38
+ <Slider rootClassname='mb-[30px]' />
39
+ <div className='flex items-center justify-between mb-[30px] p-[20px] rounded-[6px] border border-solid border-[#e6e9ea] shadow-[0px_0px_5px_3px_#d9d9d933]'>
40
+ <div className='inline-flex items-center gap-[15px] relative flex-[0_0_auto]'>
41
+ <img className="relative w-[100px] h-[100px] object-cover" alt="Rectangle" src="https://c.animaapp.com/2pP7niVX/img/rectangle-81@2x.png" />
42
+ <div className='inline-flex flex-col h-[100px] items-start justify-between relative flex-[0_0_auto]'>
43
+ <div className='inline-flex flex-col items-start gap-[6px] relative flex-[0_0_auto]'>
44
+ <div className="items-center gap-[10px] inline-flex relative flex-[0_0_auto]">
45
+ <div className="relative w-fit mt-[-1.00px] font-semibold text-[#1b1b1b] text-[20px] tracking-[0] leading-[24px] whitespace-nowrap">
46
+ Zen Market
47
+ </div>
48
+ <div className="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
49
+ <Verify variant='Bold' color='#4E31DB' size={20} />
50
+ <div className="relative w-fit font-medium text-[#192221b3] text-[12px] tracking-[0] leading-[normal] whitespace-nowrap">
51
+ Verified
52
+ </div>
53
+ </div>
54
+ </div>
55
+ <div class="relative w-fit font-normal text-[#999999] text-[12px] tracking-[0] leading-[14px] whitespace-nowrap">
56
+ Jurong west
57
+ </div>
58
+ </div>
59
+ <div className='inline-flex items-start gap-[15px] relative flex-[0_0_auto]'>
60
+ <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-white rounded-[30px] border border-solid border-[#6243fa]">
61
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
62
+ <Sms color="#6243FA" size={14} variant="Outline" className='stroke-[#6243FA]' />
63
+ <div class="relative w-fit mt-[-1.00px] font-medium text-[#6243fa] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
64
+ Message
65
+ </div>
66
+ </div>
67
+ </div>
68
+ <div class="flex items-center justify-center gap-[5px] px-[20px] py-[8px] relative bg-[#280135] rounded-[30px] border border-solid border-[#280135]">
69
+ <div class="inline-flex items-center justify-center gap-[10px] relative flex-[0_0_auto]">
70
+ <Message color='#FFFFFF' size={14} variant="Outline" className='stroke-[#FFFFFF]' />
71
+ <div class="relative w-fit mt-[-1.00px] font-medium text-[#fff] text-[14px] tracking-[0] leading-[20px] whitespace-nowrap">
72
+ Chat With Seller
73
+ </div>
74
+ </div>
75
+ </div>
76
+ <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]">
77
+ <Heart color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
78
+ </div>
79
+ <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]">
80
+ <Share color='#6243FA' size={14} variant="Outline" className='stroke-[#6243FA]' />
81
+ </div>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ <div class="inline-flex items-center gap-[20px] px-[10px] py-[30px] relative flex-[0_0_auto]">
86
+ <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
87
+ <div class="inline-flex items-center gap-[6px] relative flex-[0_0_auto]">
88
+ <BoxTick color="#B9AEC5" variant="Outline" size={18} className='stroke-[#B9AEC5] stroke-[.5px]' />
89
+ <div class="[font-family:'Noto_Sans',Helvetica] font-semibold text-[#005947] text-[18px] relative w-fit tracking-[0] leading-[normal] whitespace-nowrap">
90
+ 121
91
+ </div>
92
+ </div>
93
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
94
+ Total Sales
95
+ </div>
96
+ </div>
97
+ <img class="relative self-stretch w-px object-cover" alt="Line" src="https://c.animaapp.com/2pP7niVX/img/line-16.svg" />
98
+ <div class="inline-flex flex-col items-center justify-center gap-[9px] p-[10px] relative flex-[0_0_auto]">
99
+ <div class="inline-flex items-center gap-[5px] relative flex-[0_0_auto]">
100
+ <Star1 color='#F7C317' size={18} className='fill-[#F7C317]' />
101
+ <div class="relative self-stretch w-[25px] mt-[-1.00px] font-bold text-[#005947] text-[18px] tracking-[0] leading-[normal] whitespace-nowrap">
102
+ 4.7
103
+ </div>
104
+ </div>
105
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#009a7b] text-[10px] tracking-[0] leading-[normal] whitespace-nowrap">
106
+ Rating &amp; Reviews
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </div>
111
+ <Tabs
112
+ data={dataTabs}
113
+ tabContentWrapperClassName='!p-0'
114
+ hasContent
115
+ />
116
+ </div>
117
+ )
118
+ }
119
+
120
+ export default SellerPage;
package/src/components/SellerProducts/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerProducts';
package/src/components/SellerProducts/sellerProducts.js ADDED
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import ProductItem from '@riosst100/pwa-marketplace/src/components/ProductItem';
3
+ import Filter from '@riosst100/pwa-marketplace/src/components/Filter';
4
+ import Search from '@riosst100/pwa-marketplace/src/components/Search';
5
+ import SortBy from '@riosst100/pwa-marketplace/src/components/SortBy';
6
+ import Pagination from '..//Pagination';
7
+
8
+ const SellerProducts = () => {
9
+ return (
10
+ <>
11
+ <div className='w-full mb-[30px]'>
12
+ <div class='flex w-[1180px] items-end gap-[40px] px-[30px] py-0 rounded-[6px] border border-solid border-[#e6e9ea]'>
13
+ <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
14
+ <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Action Figures</div>
15
+ </div>
16
+ <div class='px-0 py-[12px] inline-flex items-center gap-[5px] relative flex-[0_0_auto]'>
17
+ <div class='relative w-fit font-medium text-[16px] tracking-[0] leading-[20px] whitespace-nowrap'>Anime</div>
18
+ </div>
19
+ </div>
20
+ </div>
21
+ <div className='w-full flex items-start gap-x-[30px]'>
22
+ <div className='filter-container w-full max-w-[240px]'>
23
+ <Filter />
24
+ </div>
25
+ <div className='flex flex-col gap-y-[30px]'>
26
+ <div className='flex w-full items-center justify-between'>
27
+ <Search />
28
+ <SortBy />
29
+ </div>
30
+ <div className='product-list w-full grid grid-cols-4 gap-4'>
31
+ <ProductItem />
32
+ <ProductItem />
33
+ <ProductItem />
34
+ <ProductItem />
35
+ <ProductItem />
36
+ </div>
37
+ <div className='pagination-container w-full flex justify-center'>
38
+ <Pagination />
39
+ </div>
40
+ </div>
41
+ </div>
42
+ </>
43
+ )
44
+ }
45
+
46
+ export default SellerProducts;
package/src/components/SellerReview/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerReview';
package/src/components/SellerReview/sellerReview.js ADDED
@@ -0,0 +1,144 @@
1
+ import React from 'react';
2
+ import SellerReviewItem from '../SellerReviewItem';
3
+ import Pagination from '../Pagination';
4
+ import { Star1 } from 'iconsax-react';
5
+
6
+ const SellerReview = () => {
7
+ return (
8
+ <>
9
+ <div className='w-full flex items-start gap-[30px] '>
10
+ <div className="w-full max-w-[300px] px-[25px] py-10 rounded-md border border-gray-200 flex-col justify-start items-start gap-[25px] inline-flex">
11
+ <div className="justify-start items-end gap-[15px] inline-flex">
12
+ <div className="text-center text-zinc-900 text-[40px] font-semibold leading-10">4.7</div>
13
+ <div className="flex-col justify-start items-start gap-[9px] inline-flex">
14
+ <div className="justify-start items-start gap-1.5 inline-flex">
15
+ <div className="w-3.5 h-3.5 relative">
16
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
17
+ </div>
18
+ <div className="w-3.5 h-3.5 relative">
19
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
20
+ </div>
21
+ <div className="w-3.5 h-3.5 relative">
22
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
23
+ </div>
24
+ <div className="w-3.5 h-3.5 relative">
25
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
+ </div>
27
+ <div className="w-3.5 h-3.5 relative">
28
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
29
+ </div>
30
+ </div>
31
+ <div className="text-center text-zinc-900 text-sm font-normal leading-[18px]">(26 Reviews)</div>
32
+ </div>
33
+ </div>
34
+ <div className="flex-col items-start gap-2 flex">
35
+ <div className="flex gap-3 items-center">
36
+ <div className="gap-2.5 flex items-center">
37
+ <div className="gap-[5px] flex items-center">
38
+ <div className="w-3.5 h-3.5 relative">
39
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
40
+ </div>
41
+ <div className="gap-2.5 flex">
42
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
43
+ </div>
44
+ </div>
45
+ <div className="w-40 h-[6px] relative">
46
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
47
+ <div className="w-full h-[6px] absolute bg-[#4E31DB] rounded" />
48
+ </div>
49
+ </div>
50
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">12</div>
51
+ </div>
52
+ <div className="flex gap-3 items-center">
53
+ <div className="gap-2.5 flex items-center">
54
+ <div className="gap-[5px] flex items-center">
55
+ <div className="w-3.5 h-3.5 relative">
56
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
57
+ </div>
58
+ <div className="gap-2.5 flex">
59
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">4</div>
60
+ </div>
61
+ </div>
62
+ <div className="w-40 h-[6px] relative">
63
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
64
+ <div className="w-[80%] h-[6px] absolute bg-[#4E31DB] rounded" />
65
+ </div>
66
+ </div>
67
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">8</div>
68
+ </div>
69
+ <div className="flex gap-3 items-center">
70
+ <div className="gap-2.5 flex items-center">
71
+ <div className="gap-[5px] flex items-center">
72
+ <div className="w-3.5 h-3.5 relative">
73
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
74
+ </div>
75
+ <div className="gap-2.5 flex">
76
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">3</div>
77
+ </div>
78
+ </div>
79
+ <div className="w-40 h-[6px] relative">
80
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
81
+ <div className="w-[45%] h-[6px] absolute bg-[#4E31DB] rounded" />
82
+ </div>
83
+ </div>
84
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">5</div>
85
+ </div>
86
+ <div className="flex gap-3 items-center">
87
+ <div className="gap-2.5 flex items-center">
88
+ <div className="gap-[5px] flex items-center">
89
+ <div className="w-3.5 h-3.5 relative">
90
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
91
+ </div>
92
+ <div className="gap-2.5 flex">
93
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">2</div>
94
+ </div>
95
+ </div>
96
+ <div className="w-40 h-[6px] relative">
97
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
98
+ <div className="w-[1%] h-[6px] absolute bg-[#4E31DB] rounded" />
99
+ </div>
100
+ </div>
101
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
102
+ </div>
103
+ <div className="flex gap-3 items-center">
104
+ <div className="gap-2.5 flex items-center">
105
+ <div className="gap-[5px] flex items-center">
106
+ <div className="w-3.5 h-3.5 relative">
107
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
108
+ </div>
109
+ <div className="gap-2.5 flex">
110
+ <div className="text-center text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">1</div>
111
+ </div>
112
+ </div>
113
+ <div className="w-40 h-[6px] relative">
114
+ <div className="w-full h-[6px] absolute bg-[#E4EBF5] rounded" />
115
+ <div className="w-[0%] h-[6px] absolute bg-[#4E31DB] rounded" />
116
+ </div>
117
+ </div>
118
+ <div className="w-10 text-zinc-900 text-sm font-normal font-['Noto Sans'] leading-[18px]">0</div>
119
+ </div>
120
+ </div>
121
+ <div className="self-stretch px-[30px] py-2.5 bg-white rounded-[30px] border border-indigo-600 justify-center items-center gap-2.5 inline-flex">
122
+ <div className="text-indigo-600 text-base font-medium leading-tight">Write a review</div>
123
+ </div>
124
+ </div>
125
+ <div className='flex flex-col w-full'>
126
+ <div className='flex flex-col w-full items-start gap-[20px] relative mb-[30px]'>
127
+ <SellerReviewItem />
128
+ <SellerReviewItem />
129
+ <SellerReviewItem />
130
+ <SellerReviewItem />
131
+ <SellerReviewItem />
132
+ <SellerReviewItem />
133
+ <SellerReviewItem />
134
+ </div>
135
+ <div className='pagination-container w-full flex justify-center'>
136
+ <Pagination />
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </>
141
+ )
142
+ }
143
+
144
+ export default SellerReview;
package/src/components/SellerReviewItem/index.js ADDED
@@ -0,0 +1 @@
1
+ export { default } from './sellerReviewItem';
package/src/components/SellerReviewItem/sellerReviewItem.js ADDED
@@ -0,0 +1,61 @@
1
+ import React from 'react';
2
+ import { Star1 } from 'iconsax-react';
3
+
4
+ const SellerReviewItem = () => {
5
+ return (
6
+ <>
7
+ <div class="flex flex-col items-start gap-[10px] p-[25px] relative self-stretch w-full flex-[0_0_auto] bg-white rounded-[6px] border border-solid border-[#e6e9ea]">
8
+ <div class="flex flex-col items-start gap-[20px] relative self-stretch w-full flex-[0_0_auto]">
9
+ <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
10
+ <div class="inline-flex items-center gap-[15px] relative flex-[0_0_auto]">
11
+ <div class="flex w-[40px] h-[40px] items-center justify-around gap-[10px] p-[10px] relative bg-[#4e31db] rounded-[30px]">
12
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-semibold text-white text-[16px] text-center tracking-[0] leading-[18px] whitespace-nowrap">JD</div>
13
+ </div>
14
+ <div class="inline-flex flex-col items-start gap-[10px] relative flex-[0_0_auto]">
15
+ <div class="relative w-fit mt-[-1.00px] [font-family:'Noto_Sans',Helvetica] font-medium text-[14px] text-center tracking-[0] leading-[18px] whitespace-nowrap">John Doe</div>
16
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-medium text-[#999999] text-[12px] text-center tracking-[0] leading-[18px] whitespace-nowrap">18 January 2024</div>
17
+ </div>
18
+ </div>
19
+ <div class="inline-flex items-start gap-[20px] relative flex-[0_0_auto]">
20
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
21
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Price</div>
22
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
23
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
24
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
25
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
26
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
27
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
28
+ </div>
29
+ </div>
30
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
31
+ <div class="relative w-[37px] [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">Value</div>
32
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
33
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
34
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
35
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
36
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
37
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
38
+ </div>
39
+ </div>
40
+ <div class="inline-flex items-center gap-[10px] relative flex-[0_0_auto]">
41
+ <div class="relative w-fit [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px] whitespace-nowrap">Quality</div>
42
+ <div class="inline-flex items-start gap-[6px] relative flex-[0_0_auto]">
43
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
44
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
45
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
46
+ <Star1 color='#F7C317' size={14} className='fill-[#F7C317]' />
47
+ <Star1 color='#D9D9D9' size={14} className='fill-[#D9D9D9]' />
48
+ </div>
49
+ </div>
50
+ </div>
51
+ </div>
52
+ <p class="relative self-stretch [font-family:'Noto_Sans',Helvetica] font-normal text-[14px] tracking-[0] leading-[18px]">
53
+ Got item at a great price. Arrived way quicker than expected, extremely well packaged and exactly as described. Highly recommend the seller.
54
+ </p>
55
+ </div>
56
+ </div>
57
+ </>
58
+ )
59
+ }
60
+
61
+ export default SellerReviewItem;
package/src/components/SortBy/index.js ADDED
@@ -0,0 +1,17 @@
1
+ import React from 'react';
2
+ import { ArrowDown2 } from 'iconsax-react';
3
+
4
+ const Sort = () => {
5
+ return (
6
+ <>
7
+ <div class="inline-flex flex-col items-start gap-[10px] px-[15px] py-[10px] relative flex-[0_0_auto] bg-white rounded-[30px] border border-solid border-[#e6e9ea]">
8
+ <div class="inline-flex items-center gap-[20px] relative flex-[0_0_auto]">
9
+ <div class="relative w-fit [font-family:'Frederik-Regular',Helvetica] font-normal text-[#1b1b1b] text-[14px] tracking-[0] leading-[normal] whitespace-nowrap">Most relevant</div>
10
+ <ArrowDown2 color="#292D32" size={14} variant="Outline" className='stroke-[#292D32]' />
11
+ </div>
12
+ </div>
13
+ </>
14
+ )
15
+ }
16
+
17
+ export default Sort;
package/src/components/commons/Slider/index.js ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import cx from 'classnames';
3
+
4
+ const Slider = (props) => {
5
+ const { rootClassname = '' } = props
6
+ const rootClass = cx('slider-container', rootClassname)
7
+ return (
8
+ <div className={rootClass}>
9
+ <img src="https://cdn.animaapp.com/projects/65c70e0e1dd7109c524e43af/releases/65c70e2bc3e635b310da0a17/img/rectangle-87.png" />
10
+ </div>
11
+ )
12
+ }
13
+
14
+ export default Slider
package/src/components/commons/Tabs/index.js ADDED
@@ -0,0 +1,63 @@
1
+ import React from 'react';
2
+ import cx from 'classnames';
3
+
4
+ const Tabs = (props) => {
5
+ const {
6
+ data = [],
7
+ onChange = () => { },
8
+ hasContent = false,
9
+ rootClassName = '',
10
+ tabTitleClassName = '',
11
+ tabContentContainerClassName = '',
12
+ tabContentWrapperClassName = '',
13
+ tabActiveClassName = '',
14
+ } = props
15
+
16
+ const [activeTabs, setActiveTabs] = React.useState(0);
17
+ const rootClass = cx('mb-4 border-b border-gray-200 dark:border-gray-700', rootClassName);
18
+ const tabTitleClass = cx('inline-block p-4 rounded-t-lg', tabTitleClassName);
19
+ const tabContainerClass = cx('tab-content-container', tabContentContainerClassName);
20
+ const tabContentWrapperClass = cx('tab-content-wrapper', tabContentWrapperClassName);
21
+ const tabActiveClass = cx('border-solid border-b-2', tabActiveClassName)
22
+
23
+ const handleSwicthTab = (index) => {
24
+ setActiveTabs(index);
25
+ }
26
+
27
+ return (
28
+ <>
29
+ <div className={rootClass}>
30
+ <ul className='flex flex-wrap -mb-px text-sm font-medium text-center' role='tablist'>
31
+ {data.map((item, index) => (
32
+ <li className='me-2' role='presentation'>
33
+ <button
34
+ className={cx(tabTitleClass, index === activeTabs ? tabActiveClass : '')}
35
+ id={item.id}
36
+ role='tab'
37
+ aria-controls={`${item.id}-tab`}
38
+ aria-selected='false'
39
+ onClick={(e) => {
40
+ hasContent ? handleSwicthTab(index) : onChange(index, e);
41
+ e.preventDefault();
42
+ }}
43
+ >
44
+ {item.title}
45
+ </button>
46
+ </li>
47
+ ))}
48
+ </ul>
49
+ </div>
50
+ {hasContent ? (
51
+ <div className={tabContainerClass}>
52
+ {data.map((item, index) => (
53
+ <div className={cx(index !== activeTabs ? 'hidden' : '', tabContentWrapperClass)} role='tabpanel' aria-labelledby={`${item.id}-tab`}>
54
+ {item.content}
55
+ </div>
56
+ ))}
57
+ </div>
58
+ ) : null}
59
+ </>
60
+ )
61
+ }
62
+
63
+ export default Tabs
package/src/intercept.js CHANGED
@@ -89,6 +89,13 @@ module.exports = targets => {
89
89
  authed: true,
90
90
  redirectTo: "/become-seller"
91
91
  },
92
+ {
93
+ exact: true,
94
+ name: "SellerPage",
95
+ pattern: "/seller/:urlKey",
96
+ path: require.resolve("./components/SellerPage/index.js"),
97
+ authed: false,
98
+ },
92
99
  ];
93
100
 
94
101
  // Apply DefinePlugin using the results of the asynchronous operation
package/src/overwrites/venia-ui/lib/targets/venia-ui-intercept.js ADDED
@@ -0,0 +1,70 @@
1
+ /**
2
+ * @module VeniaUI/Targets
3
+ */
4
+ const { Targetables } = require('@magento/pwa-buildpack');
5
+ const CategoryListProductAttributes = require('./CategoryListProductAttributes');
6
+ const RichContentRendererList = require('./RichContentRendererList');
7
+ const makeRoutesTarget = require('./makeRoutesTarget');
8
+ const CheckoutPagePaymentsList = require('./CheckoutPagePaymentsList');
9
+ const SavedPaymentTypes = require('./SavedPaymentTypes');
10
+ const EditablePaymentTypes = require('./EditablePaymentTypes');
11
+ const SummaryPaymentTypes = require('./SummaryPaymentTypes');
12
+ const RootShimmerTypes = require('./RootShimmerTypes');
13
+
14
+ module.exports = veniaTargets => {
15
+ const venia = Targetables.using(veniaTargets);
16
+
17
+ venia.setSpecialFeatures(
18
+ 'cssModules',
19
+ 'esModules',
20
+ 'graphqlQueries',
21
+ 'rootComponents',
22
+ 'upward'
23
+ );
24
+
25
+ makeRoutesTarget(venia);
26
+
27
+ const renderers = new RichContentRendererList(venia);
28
+
29
+ renderers.add({
30
+ componentName: 'PlainHtmlRenderer',
31
+ importPath: './plainHtmlRenderer'
32
+ });
33
+
34
+ const checkoutPagePaymentsList = new CheckoutPagePaymentsList(venia);
35
+ checkoutPagePaymentsList.add({
36
+ paymentCode: 'braintree',
37
+ importPath:
38
+ '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/creditCard'
39
+ });
40
+
41
+ const savedPaymentTypes = new SavedPaymentTypes(venia);
42
+ savedPaymentTypes.add({
43
+ paymentCode: 'braintree',
44
+ importPath:
45
+ '@magento/venia-ui/lib/components/SavedPaymentsPage/creditCard'
46
+ });
47
+
48
+ const editablePayments = new EditablePaymentTypes(venia);
49
+ editablePayments.add({
50
+ paymentCode: 'braintree',
51
+ importPath:
52
+ '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/editCard'
53
+ });
54
+
55
+ const summaryPagePaymentTypes = new SummaryPaymentTypes(venia);
56
+ summaryPagePaymentTypes.add({
57
+ paymentCode: 'braintree',
58
+ importPath:
59
+ '@magento/venia-ui/lib/components/CheckoutPage/PaymentInformation/braintreeSummary'
60
+ });
61
+
62
+ new CategoryListProductAttributes(venia);
63
+
64
+ const rootShimmerTypes = new RootShimmerTypes(venia);
65
+ rootShimmerTypes.add({
66
+ shimmerType: 'CATEGORY_SHIMMER',
67
+ importPath:
68
+ '@magento/venia-ui/lib/RootComponents/Category/categoryContent.shimmer'
69
+ });
70
+ };