@rxdrag/website-lib-core 0.0.101 → 0.0.102

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 (2) hide show
  1. package/package.json +3 -3
  2. package/src/react/components/Medias/index.tsx +33 -45
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rxdrag/website-lib-core",
3
- "version": "0.0.101",
3
+ "version": "0.0.102",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": "./index.ts"
@@ -24,9 +24,9 @@
24
24
  "@types/react-dom": "^19.1.0",
25
25
  "eslint": "^7.32.0",
26
26
  "typescript": "^5",
27
- "@rxdrag/tsconfig": "0.2.0",
27
+ "@rxdrag/slate-preview": "1.2.63",
28
28
  "@rxdrag/eslint-config-custom": "0.2.12",
29
- "@rxdrag/slate-preview": "1.2.63"
29
+ "@rxdrag/tsconfig": "0.2.0"
30
30
  },
31
31
  "dependencies": {
32
32
  "@iconify/utils": "^3.0.2",
package/src/react/components/Medias/index.tsx CHANGED
@@ -122,7 +122,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
122
122
  selectedId={selectedId}
123
123
  aspect={aspect}
124
124
  enableZoom={enableZoom}
125
- className={clsx(isVerticalThumbs ? "flex-1" : "w-full", mainArea)}
125
+ className={clsx(isVerticalThumbs ? "w-full md:flex-1" : "w-full", mainArea)}
126
126
  arrowButtonClass={arrowButton}
127
127
  arrowIconClass={arrowIcon}
128
128
  playButtonClass={playButton}
@@ -137,7 +137,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
137
137
  <div
138
138
  className={clsx(
139
139
  "relative group/thumbs",
140
- isVerticalThumbs ? "w-24 h-full px-1" : "w-full mt-4",
140
+ isVerticalThumbs ? "w-full mt-4 md:w-24 md:h-full md:px-1" : "w-full mt-4",
141
141
  navigation
142
142
  )}
143
143
  >
@@ -151,7 +151,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
151
151
  "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
152
152
  "text-gray-700 dark:text-gray-200 transition-all duration-200",
153
153
  isVerticalThumbs
154
- ? "top-2 left-1/2 -translate-x-1/2"
154
+ ? "left-2 top-1/2 -translate-y-1/2 md:top-2 md:left-1/2 md:-translate-x-1/2"
155
155
  : "left-2 top-1/2 -translate-y-1/2",
156
156
  !canPrevious
157
157
  ? "opacity-0 pointer-events-none"
@@ -162,26 +162,21 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
162
162
  >
163
163
  <svg
164
164
  xmlns="http://www.w3.org/2000/svg"
165
- className={clsx("h-4 w-4", arrowIcon)}
165
+ className={clsx(
166
+ "h-4 w-4",
167
+ isVerticalThumbs && "md:rotate-90",
168
+ arrowIcon
169
+ )}
166
170
  fill="none"
167
171
  viewBox="0 0 24 24"
168
172
  stroke="currentColor"
169
173
  >
170
- {isVerticalThumbs ? (
171
- <path
172
- strokeLinecap="round"
173
- strokeLinejoin="round"
174
- strokeWidth={2}
175
- d="M5 15l7-7 7 7"
176
- />
177
- ) : (
178
- <path
179
- strokeLinecap="round"
180
- strokeLinejoin="round"
181
- strokeWidth={2}
182
- d="M15 19l-7-7 7-7"
183
- />
184
- )}
174
+ <path
175
+ strokeLinecap="round"
176
+ strokeLinejoin="round"
177
+ strokeWidth={2}
178
+ d="M15 19l-7-7 7-7"
179
+ />
185
180
  </svg>
186
181
  </button>
187
182
  )}
@@ -189,21 +184,19 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
189
184
  <div
190
185
  className={clsx(
191
186
  "flex-1",
192
- isVerticalThumbs ? "h-full py-0.5" : "w-full px-0.5"
187
+ isVerticalThumbs
188
+ ? "w-full px-0.5 md:h-full md:py-0.5"
189
+ : "w-full px-0.5"
193
190
  )}
194
191
  >
195
192
  <div
196
193
  className={clsx(
197
194
  "gap-3",
198
- isVerticalThumbs ? "flex flex-col" : "grid"
195
+ isVerticalThumbs ? "grid md:flex md:flex-col" : "grid"
199
196
  )}
200
- style={
201
- !isVerticalThumbs
202
- ? {
203
- gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
204
- }
205
- : undefined
206
- }
197
+ style={{
198
+ gridTemplateColumns: `repeat(${actualVisibleCount}, minmax(0, 1fr))`,
199
+ }}
207
200
  >
208
201
  {value?.map((media, index) => {
209
202
  if (index < startIndex || index >= endIndex) return null;
@@ -234,7 +227,7 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
234
227
  "bg-white/60 dark:bg-black/50 shadow-sm backdrop-blur-sm",
235
228
  "text-gray-700 dark:text-gray-200 transition-all duration-200",
236
229
  isVerticalThumbs
237
- ? "bottom-2 left-1/2 -translate-x-1/2"
230
+ ? "right-2 top-1/2 -translate-y-1/2 md:bottom-2 md:left-1/2 md:-translate-x-1/2"
238
231
  : "right-2 top-1/2 -translate-y-1/2",
239
232
  !canNext
240
233
  ? "opacity-0 pointer-events-none"
@@ -245,26 +238,21 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
245
238
  >
246
239
  <svg
247
240
  xmlns="http://www.w3.org/2000/svg"
248
- className={clsx("h-4 w-4", arrowIcon)}
241
+ className={clsx(
242
+ "h-4 w-4",
243
+ isVerticalThumbs && "md:rotate-90",
244
+ arrowIcon
245
+ )}
249
246
  fill="none"
250
247
  viewBox="0 0 24 24"
251
248
  stroke="currentColor"
252
249
  >
253
- {isVerticalThumbs ? (
254
- <path
255
- strokeLinecap="round"
256
- strokeLinejoin="round"
257
- strokeWidth={2}
258
- d="M19 9l-7 7-7-7"
259
- />
260
- ) : (
261
- <path
262
- strokeLinecap="round"
263
- strokeLinejoin="round"
264
- strokeWidth={2}
265
- d="M9 5l7 7-7 7"
266
- />
267
- )}
250
+ <path
251
+ strokeLinecap="round"
252
+ strokeLinejoin="round"
253
+ strokeWidth={2}
254
+ d="M9 5l7 7-7 7"
255
+ />
268
256
  </svg>
269
257
  </button>
270
258
  )}