@akinon/pz-similar-products 1.92.0-snapshot-ZERO-3457-20250627111231 → 1.92.0-snapshot-ZERO-3457-20250627121541

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 (6) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/README.md +5 -2
  3. package/package.json +1 -1
  4. package/src/types/index.ts +2 -0
  5. package/src/views/filters.tsx +664 -646
  6. package/src/views/image-search.tsx +98 -86
package/src/views/image-search.tsx CHANGED
@@ -79,114 +79,126 @@ export function ImageSearchModal({
79
79
  };
80
80
 
81
81
  return (
82
- <Modal
83
- portalId="image-search-modal"
84
- title={t('common.search.image_search.title')}
85
- open={isOpen}
86
- setOpen={setIsOpen}
87
- className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
88
- className || ''
89
- }`}
90
- >
91
- <div
92
- className={twMerge(
93
- 'grid grid-cols-1 md:grid-cols-2 gap-4',
94
- settings?.customStyles?.imageSearchContent
95
- )}
96
- >
82
+ <>
83
+ {isOpen && (
97
84
  <div
98
85
  className={twMerge(
99
- 'md:col-span-1 p-4',
100
- settings?.customStyles?.imageSearchUploadSection
86
+ 'fixed inset-0 bg-black/50 z-[60]',
87
+ settings?.customStyles?.imageSearchModalOverlay
101
88
  )}
102
- >
103
- <p
104
- className={twMerge(
105
- 'mb-4 text-lg font-medium',
106
- settings?.customStyles?.imageSearchUploadTitle
107
- )}
108
- >
109
- {t('common.search.image_search.upload_image')}
110
- </p>
111
- <div
112
- className={twMerge(
113
- 'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
114
- settings?.customStyles?.imageSearchUploadArea
115
- )}
116
- >
117
- <Input
118
- type="file"
119
- ref={fileInputRef}
120
- onChange={handleFileSelect}
121
- accept="image/*"
122
- className="hidden"
123
- />
124
- <Button
125
- className={twMerge(
126
- 'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
127
- settings?.customStyles?.imageSearchUploadButton
128
- )}
129
- onClick={() => fileInputRef.current?.click()}
130
- >
131
- {t('common.search.image_search.select_image')}
132
- </Button>
133
- </div>
134
- </div>
89
+ onClick={() => setIsOpen(false)}
90
+ />
91
+ )}
92
+
93
+ <Modal
94
+ portalId="image-search-modal"
95
+ title={t('common.search.image_search.title')}
96
+ open={isOpen}
97
+ setOpen={setIsOpen}
98
+ className={`w-full max-w-2xl max-h-[90vh] overflow-auto ${
99
+ className || ''
100
+ }`}
101
+ >
135
102
  <div
136
103
  className={twMerge(
137
- 'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
138
- settings?.customStyles?.imageSearchTipsSection
104
+ 'grid grid-cols-1 md:grid-cols-2 gap-4',
105
+ settings?.customStyles?.imageSearchContent
139
106
  )}
140
107
  >
141
- <p
142
- className={twMerge(
143
- 'mb-2 font-medium',
144
- settings?.customStyles?.imageSearchTipsTitle
145
- )}
146
- >
147
- {t('common.search.image_search.best_results')}
148
- </p>
149
- <ul
108
+ <div
150
109
  className={twMerge(
151
- 'text-left list-disc pl-5 text-sm text-gray-600',
152
- settings?.customStyles?.imageSearchTipsList
110
+ 'md:col-span-1 p-4',
111
+ settings?.customStyles?.imageSearchUploadSection
153
112
  )}
154
113
  >
155
- <li
114
+ <p
156
115
  className={twMerge(
157
- 'mb-2',
158
- settings?.customStyles?.imageSearchTipsItem
116
+ 'mb-4 text-lg font-medium',
117
+ settings?.customStyles?.imageSearchUploadTitle
159
118
  )}
160
119
  >
161
- {t('common.search.image_search.tip_1')}
162
- </li>
163
- <li
120
+ {t('common.search.image_search.upload_image')}
121
+ </p>
122
+ <div
164
123
  className={twMerge(
165
- 'mb-2',
166
- settings?.customStyles?.imageSearchTipsItem
124
+ 'border-2 border-dashed border-gray-300 rounded-lg p-8 text-center',
125
+ settings?.customStyles?.imageSearchUploadArea
167
126
  )}
168
127
  >
169
- {t('common.search.image_search.tip_2')}
170
- </li>
171
- <li
128
+ <Input
129
+ type="file"
130
+ ref={fileInputRef}
131
+ onChange={handleFileSelect}
132
+ accept="image/*"
133
+ className="hidden"
134
+ />
135
+ <Button
136
+ className={twMerge(
137
+ 'w-full py-4 px-6 border-2 border-primary text-white hover:bg-primary hover:text-white transition-colors rounded-md',
138
+ settings?.customStyles?.imageSearchUploadButton
139
+ )}
140
+ onClick={() => fileInputRef.current?.click()}
141
+ >
142
+ {t('common.search.image_search.select_image')}
143
+ </Button>
144
+ </div>
145
+ </div>
146
+ <div
147
+ className={twMerge(
148
+ 'md:col-span-1 bg-gray-50 p-4 rounded-md h-fit my-4',
149
+ settings?.customStyles?.imageSearchTipsSection
150
+ )}
151
+ >
152
+ <p
172
153
  className={twMerge(
173
- 'mb-2',
174
- settings?.customStyles?.imageSearchTipsItem
154
+ 'mb-2 font-medium',
155
+ settings?.customStyles?.imageSearchTipsTitle
175
156
  )}
176
157
  >
177
- {t('common.search.image_search.tip_3')}
178
- </li>
179
- <li
158
+ {t('common.search.image_search.best_results')}
159
+ </p>
160
+ <ul
180
161
  className={twMerge(
181
- 'mb-2',
182
- settings?.customStyles?.imageSearchTipsItem
162
+ 'text-left list-disc pl-5 text-sm text-gray-600',
163
+ settings?.customStyles?.imageSearchTipsList
183
164
  )}
184
165
  >
185
- {t('common.search.image_search.tip_4')}
186
- </li>
187
- </ul>
166
+ <li
167
+ className={twMerge(
168
+ 'mb-2',
169
+ settings?.customStyles?.imageSearchTipsItem
170
+ )}
171
+ >
172
+ {t('common.search.image_search.tip_1')}
173
+ </li>
174
+ <li
175
+ className={twMerge(
176
+ 'mb-2',
177
+ settings?.customStyles?.imageSearchTipsItem
178
+ )}
179
+ >
180
+ {t('common.search.image_search.tip_2')}
181
+ </li>
182
+ <li
183
+ className={twMerge(
184
+ 'mb-2',
185
+ settings?.customStyles?.imageSearchTipsItem
186
+ )}
187
+ >
188
+ {t('common.search.image_search.tip_3')}
189
+ </li>
190
+ <li
191
+ className={twMerge(
192
+ 'mb-2',
193
+ settings?.customStyles?.imageSearchTipsItem
194
+ )}
195
+ >
196
+ {t('common.search.image_search.tip_4')}
197
+ </li>
198
+ </ul>
199
+ </div>
188
200
  </div>
189
- </div>
190
- </Modal>
201
+ </Modal>
202
+ </>
191
203
  );
192
204
  }