@xuda.io/xuda-widget-plugin-xuda-drive 1.0.1

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 (4) hide show
  1. package/README.md +1 -0
  2. package/index.mjs +181 -0
  3. package/package.json +16 -0
  4. package/runtime.mjs +762 -0
package/README.md ADDED
@@ -0,0 +1 @@
1
+ ## Xuda File Upload widget plugin
package/index.mjs ADDED
@@ -0,0 +1,181 @@
1
+ export const methods = {
2
+ upload: {
3
+ name: "Upload",
4
+ tooltip: "",
5
+ fields: {
6
+ file_upload_drop_area_label: {
7
+ label: "Drop Area Label",
8
+ type: "string",
9
+ },
10
+ file_upload_allow_multiple_files: {
11
+ label: "Allow Multiple Files",
12
+ type: "string",
13
+ render: "segment",
14
+ tooltip: "",
15
+ options: [
16
+ {
17
+ label: "No",
18
+ value: "",
19
+ },
20
+ {
21
+ label: "Yes",
22
+ value: "Y",
23
+ },
24
+ ],
25
+ },
26
+ file_upload_mime_type_preset: {
27
+ label: "Mime Type",
28
+ type: "string",
29
+ render: "select",
30
+ tooltip: "",
31
+ options: [
32
+ {
33
+ label: "Select",
34
+ value: "",
35
+ },
36
+ {
37
+ label: "Video",
38
+ value: "video",
39
+ },
40
+ {
41
+ label: "Audio",
42
+ value: "audio",
43
+ },
44
+ {
45
+ label: "Image",
46
+ value: "image",
47
+ },
48
+ ],
49
+ },
50
+ file_upload_custom_mime_types: {
51
+ label: "Custom Mime Types",
52
+ type: "string",
53
+ tooltip: "Separate with commas",
54
+ },
55
+ public_file: {
56
+ label: "Public File",
57
+ type: "string",
58
+ render: "segment",
59
+ tooltip: "",
60
+ options: [
61
+ {
62
+ label: "No",
63
+ value: "",
64
+ },
65
+ {
66
+ label: "Yes",
67
+ value: "Y",
68
+ },
69
+ ],
70
+ },
71
+ drive_folder: {
72
+ label: "Drive Folder",
73
+ type: "string",
74
+ },
75
+ upload_tags: {
76
+ label: "Upload Set Tags",
77
+ type: "string",
78
+ tooltip: "Separate with commas",
79
+ },
80
+ auto_tag_generator: {
81
+ label: "Auto Tag Generator",
82
+ type: "string",
83
+ render: "segment",
84
+ tooltip: "Create tags extract from file name",
85
+ options: [
86
+ {
87
+ label: "No",
88
+ value: "",
89
+ },
90
+ {
91
+ label: "Yes",
92
+ value: "Y",
93
+ },
94
+ ],
95
+ },
96
+ auto_tag_identifier: {
97
+ label: "Auto Tag Identifier",
98
+ type: "string",
99
+ tooltip: "A character to use to separate the tags from the filename",
100
+ },
101
+ auto_tag_translations: {
102
+ label: "Auto Tag Translations",
103
+ type: "object",
104
+ tooltip:
105
+ "Translation is enabled by defining key-value pairs in an object.",
106
+ },
107
+ event_name_for_successful_callback: {
108
+ label: "Successful Callback",
109
+ type: "string",
110
+ render: "eventId",
111
+ },
112
+ event_name_for_successful_remove_callback: {
113
+ label: "Successful Remove Callback",
114
+ type: "string",
115
+ render: "eventId",
116
+ },
117
+ clear_on_file_upload: {
118
+ label: "Clear on File Upload",
119
+ type: "string",
120
+ render: "segment",
121
+ tooltip: "",
122
+ options: [
123
+ {
124
+ label: "No",
125
+ value: "",
126
+ },
127
+ {
128
+ label: "Yes",
129
+ value: "Y",
130
+ },
131
+ ],
132
+ },
133
+ file_upload_folder: {
134
+ label: "Upload Folder",
135
+ type: "string",
136
+ },
137
+ },
138
+ response: { uploaded_files: "" },
139
+ },
140
+ viewer: {
141
+ name: "Viewer",
142
+ tooltip: "",
143
+ fields: {
144
+ file_upload_mime_type_preset: {
145
+ label: "Mime Type",
146
+ type: "string",
147
+ render: "select",
148
+ tooltip: "",
149
+ options: [
150
+ {
151
+ label: "Select",
152
+ value: "",
153
+ },
154
+ {
155
+ label: "Video",
156
+ value: "video",
157
+ },
158
+ {
159
+ label: "Audio",
160
+ value: "audio",
161
+ },
162
+ {
163
+ label: "Image",
164
+ value: "image",
165
+ },
166
+ ],
167
+ },
168
+
169
+ drive_folder: {
170
+ label: "Drive Folder",
171
+ type: "string",
172
+ },
173
+ filter_tags: {
174
+ label: "Filter Tags",
175
+ type: "string",
176
+ tooltip: "Separate with commas",
177
+ },
178
+ },
179
+ response: { uploaded_files: "" },
180
+ },
181
+ };
package/package.json ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "name": "@xuda.io/xuda-widget-plugin-xuda-drive",
3
+ "version": "1.0.1",
4
+ "description": "Xuda Drive widget plugin",
5
+ "scripts": {
6
+ "pub": "npm version patch --force && npm publish --access public"
7
+ },
8
+ "keywords": [
9
+ "drive",
10
+ "xuda",
11
+ "plugin"
12
+ ],
13
+ "author": "xuda.io",
14
+ "license": "Proprietary software licenses",
15
+ "svg_icon": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"32\" height=\"32\" fill=\"currentColor\" viewBox=\"0 0 256 256\"><path d=\"M208,88H152V32ZM108,136a44,44,0,0,0-42.34,32v0H60a28,28,0,0,0,0,56h48a44,44,0,0,0,0-88Z\" opacity=\"0.2\"></path><path d=\"M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40v88a8,8,0,0,0,16,0V40h88V88a8,8,0,0,0,8,8h48V216H176a8,8,0,0,0,0,16h24a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM108,128a52,52,0,0,0-48,32,36,36,0,0,0,0,72h48a52,52,0,0,0,0-104Zm0,88H60a20,20,0,0,1-3.81-39.64,8,8,0,0,0,16,.36,38,38,0,0,1,1.06-6.09,7.56,7.56,0,0,0,.27-1A36,36,0,1,1,108,216Z\"></path></svg>"
16
+ }
package/runtime.mjs ADDED
@@ -0,0 +1,762 @@
1
+ export async function upload(fields, e) {
2
+ fields.method = e.method;
3
+
4
+ var ret_obj = { app_files: [], addedArr: [], deletedArr: [] };
5
+ var init_files = [];
6
+
7
+ var widget_cssClass = fields.widget_cssClass;
8
+
9
+ await func.utils.load_js_on_demand(
10
+ func.common.get_url(
11
+ e.SESSION_ID,
12
+ "dist",
13
+ "runtime/node_modules/filepond/dist/filepond.js"
14
+ )
15
+ );
16
+
17
+ await func.utils.load_js_on_demand(
18
+ func.common.get_url(
19
+ e.SESSION_ID,
20
+ "dist",
21
+ "runtime/node_modules/jquery-filepond/filepond.jquery.js"
22
+ )
23
+ );
24
+
25
+ await func.utils.load_js_on_demand(
26
+ func.common.get_url(
27
+ e.SESSION_ID,
28
+ "dist",
29
+ "runtime/node_modules/@xuda.io/pintura/filepond-plugin-image-editor/FilePondPluginImageEditor.js"
30
+ )
31
+ );
32
+
33
+ await func.utils.load_js_on_demand(
34
+ func.common.get_url(
35
+ e.SESSION_ID,
36
+ "dist",
37
+ "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.js"
38
+ )
39
+ );
40
+
41
+ await func.utils.load_js_on_demand(
42
+ func.common.get_url(
43
+ e.SESSION_ID,
44
+ "dist",
45
+ "runtime/node_modules/@xuda.io/pintura/pintura/pintura-iife.js"
46
+ )
47
+ );
48
+
49
+ await func.utils.load_js_on_demand(
50
+ func.common.get_url(
51
+ e.SESSION_ID,
52
+ "dist",
53
+ "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.js"
54
+ )
55
+ );
56
+
57
+ await func.utils.load_js_on_demand(
58
+ func.common.get_url(
59
+ e.SESSION_ID,
60
+ "dist",
61
+ "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.js"
62
+ )
63
+ );
64
+
65
+ await func.utils.load_js_on_demand(
66
+ func.common.get_url(
67
+ e.SESSION_ID,
68
+ "dist",
69
+ "runtime/node_modules/filepond-plugin-file-validate-type/dist/filepond-plugin-file-validate-type.min.js"
70
+ )
71
+ );
72
+
73
+ await func.utils.load_css_on_demand(
74
+ func.common.get_url(
75
+ e.SESSION_ID,
76
+ "dist",
77
+ "runtime/node_modules/filepond/dist/filepond.css"
78
+ )
79
+ );
80
+
81
+ func.utils.load_css_on_demand(
82
+ func.common.get_url(
83
+ e.SESSION_ID,
84
+ "dist",
85
+ "runtime/node_modules/@xuda.io/pintura/pintura/pintura.css"
86
+ )
87
+ );
88
+ func.utils.load_css_on_demand(
89
+ func.common.get_url(
90
+ e.SESSION_ID,
91
+ "dist",
92
+ "runtime/node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css"
93
+ )
94
+ );
95
+ func.utils.load_css_on_demand(
96
+ func.common.get_url(
97
+ e.SESSION_ID,
98
+ "dist",
99
+ "runtime/node_modules/filepond-plugin-media-preview/dist/filepond-plugin-media-preview.min.css"
100
+ )
101
+ );
102
+ func.utils.load_css_on_demand(
103
+ func.common.get_url(
104
+ e.SESSION_ID,
105
+ "dist",
106
+ "runtime/node_modules/filepond-plugin-file-poster/dist/filepond-plugin-file-poster.min.css"
107
+ )
108
+ );
109
+
110
+ var pond = undefined;
111
+
112
+ var init_files_fn = (files) => {
113
+ $.each(files, function (key, val) {
114
+ if (val?.server_fileName) val = val.server_fileName;
115
+ val = func.utils.get_drive_url(e.SESSION_ID, val).value;
116
+
117
+ ret_obj.app_files.push(val);
118
+ init_files.push({
119
+ source: val,
120
+ options: {
121
+ type: "local",
122
+ },
123
+ });
124
+ });
125
+ };
126
+
127
+ // init files from predefined array
128
+ if (!_.isEmpty(fields.file_upload_init_file_array)) {
129
+ if (typeof fields.file_upload_init_file_array === "string") {
130
+ fields.file_upload_init_file_array = eval(
131
+ fields.file_upload_init_file_array
132
+ );
133
+ }
134
+ if (fields.file_upload_init_file_array?.length) {
135
+ init_files_fn(fields.file_upload_init_file_array);
136
+ }
137
+ }
138
+
139
+ // init files from bind
140
+ var initialBindValue;
141
+
142
+ if (!_.isEmpty(fields["xu-bind"])) {
143
+ initialBindValue = await e.api_utils.get_field_value(fields["xu-bind"]);
144
+ let value = initialBindValue;
145
+ if (typeof value === "string") {
146
+ value = value.split(",").filter((e) => e);
147
+ }
148
+ if (value?.length) {
149
+ init_files_fn(value);
150
+ }
151
+ }
152
+
153
+ ////////////////////////////////////
154
+
155
+ const do_callback = function (is_remove) {
156
+ setTimeout(async () => {
157
+ var pond_files = $(`#${input_id}`).filepond("getFiles");
158
+ ret_obj.app_files = [];
159
+
160
+ pond_files.forEach((file) => {
161
+ var files = { data: {} };
162
+ // if (file.serverId) {
163
+ if (is_remove) {
164
+ files.data.server_fileName = file.serverId;
165
+ } else {
166
+ files.data = JSON.parse(file.serverId).data;
167
+ }
168
+
169
+ ret_obj.app_files.push(files.data);
170
+ // }
171
+ });
172
+
173
+ if (!_.isEmpty(fields["xu-bind"])) {
174
+ var ret = ret_obj.app_files;
175
+ if (typeof initialBindValue === "string")
176
+ ret = ret_obj.app_files.map((f) => f.server_fileName).join(",");
177
+
178
+ await e.api_utils.set_field_value(fields["xu-bind"], ret);
179
+ }
180
+
181
+ if (is_remove && fields.event_name_for_successful_remove_callback) {
182
+ await e.api_utils.invoke_event(
183
+ fields.event_name_for_successful_remove_callback
184
+ );
185
+ }
186
+
187
+ if (!is_remove && fields.event_name_for_successful_callback) {
188
+ await e.api_utils.invoke_event(
189
+ fields.event_name_for_successful_callback
190
+ );
191
+ }
192
+
193
+ if (fields.clear_on_file_upload) {
194
+ pond.removeFiles();
195
+ e.api_utils.set_field_value(fields["xu-bind"], []);
196
+ }
197
+ }, 100);
198
+ };
199
+
200
+ var $pallet_wrapper = $(
201
+ `<div class="image_wrapper" style="border: none !important;">`
202
+ );
203
+
204
+ var input_id = new Date().valueOf();
205
+ var $imgInp = $(
206
+ `<input class="filepond ${widget_cssClass}" id="${input_id}" />`
207
+ ).appendTo($pallet_wrapper);
208
+
209
+ e.$containerP.html($pallet_wrapper);
210
+
211
+ FilePond.registerPlugin(FilePondPluginImageEditor);
212
+ FilePond.registerPlugin(FilePondPluginMediaPreview);
213
+ FilePond.registerPlugin(FilePondPluginFilePoster);
214
+ FilePond.registerPlugin(FilePondPluginFileValidateType);
215
+
216
+ const mask_doka = (root, setInnerHTML) => {
217
+ setInnerHTML(
218
+ root,
219
+ `
220
+ <mask id="my-mask">
221
+ <rect x="0" y="0" width="100%" height="100%" fill="white"/>
222
+ <circle cx="50%" cy="50%" r="50%" fill="black"/>
223
+ </mask>
224
+ <rect fill="rgba(255,255,255,.3125)" x="0" y="0" width="100%" height="100%" mask="url(#my-mask)"/>
225
+ <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-width="1" stroke="#fff"/>
226
+ `
227
+ );
228
+ };
229
+
230
+ const axios_ajax = function (url, data) {
231
+ // const e = new URLSearchParams();
232
+
233
+ $.each(data, function (key, val) {
234
+ e.append(key, val);
235
+ });
236
+
237
+ fetch(url, {
238
+ method: "POST",
239
+ body: e,
240
+ }).then((res) => {
241
+ console.log("Request complete! response:", res);
242
+ });
243
+ };
244
+
245
+ var opt = {
246
+ allowProcess: true,
247
+ allowRemove: true,
248
+ allowRevert: true,
249
+
250
+ imageCropAspectRatio: 1,
251
+ imageResizeTargetWidth: 200,
252
+ // allowProcess: false,
253
+ imageEditInstantEdit: false,
254
+ credits: false,
255
+ allowMultiple: false,
256
+ imageEditorSupportImage: (file) => {
257
+ // return /^image/.test(file);
258
+
259
+ return (
260
+ file.type !== "image/svg+xml" &&
261
+ file.type !== "image/gif" &&
262
+ !file.type.includes("audio") &&
263
+ !file.type.includes("video")
264
+ );
265
+ },
266
+
267
+ imageEditor: {
268
+ createEditor: pintura.openEditor,
269
+ imageReader: [pintura.createDefaultImageReader],
270
+ imageWriter: [pintura.createDefaultImageWriter],
271
+
272
+ imageProcessor: pintura.processImage,
273
+ editorOptions: {
274
+ ...pintura.getEditorDefaults(),
275
+ },
276
+ legacyDataToImageState: pintura.legacyDataToImageState,
277
+ },
278
+ server: {
279
+ load: (source, load, error, progress, abort, headers) => {
280
+ // you would get the file data from your server here
281
+
282
+ try {
283
+ fetch(source)
284
+ .then(function (response) {
285
+ try {
286
+ if (response.ok) return response.blob();
287
+ throw new Error("bad image");
288
+ } catch (err) {
289
+ error({});
290
+ }
291
+ })
292
+ .then(load)
293
+ .catch((e) => {
294
+ error({});
295
+ });
296
+ } catch (err) {
297
+ error({});
298
+ }
299
+
300
+ return {
301
+ abort: () => {
302
+ abort();
303
+ },
304
+ };
305
+ },
306
+ process: (
307
+ fieldName,
308
+ file,
309
+ metadata,
310
+ load,
311
+ error,
312
+ progress,
313
+ abort,
314
+ transfer,
315
+ options
316
+ ) => {
317
+ let formData = new FormData();
318
+ formData.append("file", file, file.name);
319
+ const { app_id, gtp_token, app_token } = SESSION_OBJ[e.SESSION_ID];
320
+
321
+ formData.append("app_id_reference", APP_OBJ[app_id].app_id_reference);
322
+ formData.append("app_id", app_id);
323
+ formData.append("gtp_token", gtp_token);
324
+ formData.append("app_token", app_token);
325
+ formData.append("folder", fields.file_upload_folder);
326
+ formData.append("public", fields.public_file);
327
+
328
+ const request = new XMLHttpRequest();
329
+
330
+ let _domain = e._session.domain;
331
+ if (e._session.is_deployment) {
332
+ _domain =
333
+ e._session.opt.regional_server === "dev.xuda.io"
334
+ ? "dev.xuda.io"
335
+ : "xuda.io";
336
+ }
337
+
338
+ request.open("POST", `https://${_domain}/rpi/runtime_upload_file`);
339
+
340
+ request.upload.onprogress = (e) => {
341
+ progress(e.lengthComputable, e.loaded, e.total);
342
+ };
343
+
344
+ request.onload = async function () {
345
+ const res = JSON.parse(request.responseText);
346
+ if (request.status >= 200 && request.status < 300 && res.code > 0) {
347
+ // the load method accepts either a string (id) or an object
348
+ load(request.responseText);
349
+
350
+ var key = res.data;
351
+
352
+ ret_obj.addedArr.push(key);
353
+ delete res.code;
354
+ ret_obj.app_files.push(key);
355
+
356
+ // if (fields.instant_file_upload === "N" ? false : true) do_callback();
357
+ } else {
358
+ // Can call the error method if something is wrong, should exit after
359
+ e.report_error(res.data);
360
+ }
361
+ };
362
+
363
+ request.send(formData);
364
+
365
+ // Should expose an abort method so the request can be cancelled
366
+ return {
367
+ abort: () => {
368
+ // This function is entered if the user has tapped the cancel button
369
+ request.abort();
370
+
371
+ // Let FilePond know the request has been cancelled
372
+ abort();
373
+ },
374
+ };
375
+ },
376
+
377
+ revert: (uniqueFileId, load, error) => {
378
+ var res = JSON.parse(uniqueFileId);
379
+ var key = res.data;
380
+
381
+ ret_obj.deletedArr.push(key);
382
+
383
+ var myIndex = ret_obj.app_files.indexOf(key.server_fileName);
384
+ if (myIndex !== -1) {
385
+ ret_obj.app_files.splice(myIndex, 1);
386
+ }
387
+
388
+ let app_id = SESSION_OBJ[e.SESSION_ID].app_id;
389
+ let app_id_reference = APP_OBJ[app_id].app_id_reference;
390
+
391
+ axios_ajax(
392
+ func.common.get_url(e.SESSION_ID, "rpi", "runtime_delete_file_bulk"),
393
+ {
394
+ app_id,
395
+ server_files: ret_obj.deletedArr,
396
+ app_id_reference: app_id_reference,
397
+ gtp_token: SESSION_OBJ[e.SESSION_ID].gtp_token,
398
+ }
399
+ );
400
+ load();
401
+ },
402
+ remove: (source, load, error) => {
403
+ var source_clean = source.split("/").pop();
404
+
405
+ ret_obj.deletedArr.push(source_clean);
406
+
407
+ var myIndex = ret_obj.app_files.indexOf(
408
+ (file) => file.server_fileName === source
409
+ );
410
+ if (myIndex !== -1) {
411
+ ret_obj.app_files.splice(myIndex, 1);
412
+ }
413
+
414
+ ////////////// CALLBACK
415
+ if (fields.instant_file_upload === "N" ? false : true)
416
+ do_callback(true);
417
+ // Can call the error method if something is wrong, should exit after
418
+ // error('oh my goodness');
419
+
420
+ // Should call the load method when done, no parameters required
421
+ load();
422
+ },
423
+ },
424
+ };
425
+
426
+ if (fields.file_upload_drop_area_label) {
427
+ opt.labelIdle = fields.file_upload_drop_area_label;
428
+ }
429
+ if (fields.file_upload_allow_multiple_files) {
430
+ opt.allowMultiple = true;
431
+ }
432
+
433
+ if (init_files) {
434
+ opt.files = init_files;
435
+ }
436
+
437
+ opt.instantUpload = fields.instant_file_upload === "N" ? false : true;
438
+
439
+ if (fields.file_upload_mime_type_preset) {
440
+ switch (fields.file_upload_mime_type_preset) {
441
+ case "image":
442
+ opt.acceptedFileTypes = ["image/*"];
443
+ break;
444
+ case "video":
445
+ opt.acceptedFileTypes = ["video/*"];
446
+ break;
447
+ case "audio":
448
+ opt.acceptedFileTypes = ["audio/*"];
449
+ break;
450
+ default:
451
+ opt.acceptedFileTypes = ["image/*"];
452
+ }
453
+ } else {
454
+ if (fields.file_upload_custom_mime_types) {
455
+ opt.acceptedFileTypes = fields.file_upload_custom_mime_types.split(",");
456
+ } else {
457
+ opt.allowFileTypeValidation = false;
458
+ }
459
+ }
460
+
461
+ if (fields.file_upload_mask === "circle") {
462
+ opt.imagePreviewHeight = 170;
463
+ opt.imageCropAspectRatio = "1:1";
464
+ opt.imageResizeTargetWidth = 200;
465
+ opt.imageResizeTargetHeight = 200;
466
+ opt.stylePanelLayout = "compact circle";
467
+ opt.styleLoadIndicatorPosition = "center bottom";
468
+ opt.styleProgressIndicatorPosition = "right bottom";
469
+ opt.styleButtonRemoveItemPosition = "left bottom";
470
+ opt.styleButtonProcessItemPosition = "right bottom";
471
+ }
472
+
473
+ pond = FilePond.create($imgInp[0], opt);
474
+
475
+ pond.on("processfiles", (e) => {
476
+ do_callback();
477
+ });
478
+
479
+ return;
480
+ }
481
+
482
+ export async function viewer(fields, e) {
483
+ await func.utils.load_js_on_demand(
484
+ "https://cdn.tailwindcss.com?plugins=forms"
485
+ );
486
+
487
+ const html = `
488
+ <main class="flex-1 overflow-y-auto">
489
+ <div class="mx-auto max-w-7xl px-4 pt-8 sm:px-6 lg:px-8">
490
+ <div class="flex">
491
+ <h1 class="flex-1 text-2xl font-bold text-gray-900">Photos</h1>
492
+ <div class="ml-6 flex items-center rounded-lg bg-gray-100 p-0.5">
493
+ <button type="button" class="rounded-md p-1.5 text-gray-400 hover:bg-white hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
494
+ <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
495
+ <path fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.166a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75zm0 4.167a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd"></path>
496
+ </svg>
497
+ <span class="sr-only">Use list view</span>
498
+ </button>
499
+ <button type="button" class="ml-0.5 rounded-md bg-white p-1.5 text-gray-400 shadow-sm focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
500
+ <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
501
+ <path fill-rule="evenodd" d="M4.25 2A2.25 2.25 0 002 4.25v2.5A2.25 2.25 0 004.25 9h2.5A2.25 2.25 0 009 6.75v-2.5A2.25 2.25 0 006.75 2h-2.5zm0 9A2.25 2.25 0 002 13.25v2.5A2.25 2.25 0 004.25 18h2.5A2.25 2.25 0 009 15.75v-2.5A2.25 2.25 0 006.75 11h-2.5zm9-9A2.25 2.25 0 0011 4.25v2.5A2.25 2.25 0 0013.25 9h2.5A2.25 2.25 0 0018 6.75v-2.5A2.25 2.25 0 0015.75 2h-2.5zm0 9A2.25 2.25 0 0011 13.25v2.5A2.25 2.25 0 0013.25 18h2.5A2.25 2.25 0 0018 15.75v-2.5A2.25 2.25 0 0015.75 11h-2.5z" clip-rule="evenodd"></path>
502
+ </svg>
503
+ <span class="sr-only">Use grid view</span>
504
+ </button>
505
+ </div>
506
+ </div>
507
+
508
+ <!-- Tabs -->
509
+
510
+ <!-- Gallery -->
511
+ <section class="mt-8 pb-16" aria-labelledby="gallery-heading">
512
+ <h2 id="gallery-heading" class="sr-only">Recently viewed</h2>
513
+ <ul role="list" class="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 md:grid-cols-4 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
514
+ <li class="relative">
515
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 ring-2 ring-indigo-500 ring-offset-2" x-state:on="Current" x-state:off="Default" x-state-description='Current: "ring-2 ring-indigo-500 ring-offset-2", Default: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
516
+ <img src="https://images.unsplash.com/photo-1582053433976-25c00369fc93?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover" x-state:on="Current" x-state:off="Default" x-state-description='Current: "", Default: "group-hover:opacity-75"' />
517
+ <button type="button" class="absolute inset-0 focus:outline-none">
518
+ <span class="sr-only">View details for IMG_4985.HEIC</span>
519
+ </button>
520
+ </div>
521
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4985.HEIC</p>
522
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
523
+ </li>
524
+ <li class="relative">
525
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
526
+ <img src="https://images.unsplash.com/photo-1614926857083-7be149266cda?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
527
+ <button type="button" class="absolute inset-0 focus:outline-none">
528
+ <span class="sr-only">View details for IMG_5214.HEIC</span>
529
+ </button>
530
+ </div>
531
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_5214.HEIC</p>
532
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
533
+ </li>
534
+ <li class="relative">
535
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
536
+ <img src="https://images.unsplash.com/photo-1614705827065-62c3dc488f40?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
537
+ <button type="button" class="absolute inset-0 focus:outline-none">
538
+ <span class="sr-only">View details for IMG_3851.HEIC</span>
539
+ </button>
540
+ </div>
541
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_3851.HEIC</p>
542
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
543
+ </li>
544
+ <li class="relative">
545
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
546
+ <img src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
547
+ <button type="button" class="absolute inset-0 focus:outline-none">
548
+ <span class="sr-only">View details for IMG_4278.HEIC</span>
549
+ </button>
550
+ </div>
551
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4278.HEIC</p>
552
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
553
+ </li>
554
+ <li class="relative">
555
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
556
+ <img src="https://images.unsplash.com/photo-1586348943529-beaae6c28db9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
557
+ <button type="button" class="absolute inset-0 focus:outline-none">
558
+ <span class="sr-only">View details for IMG_6842.HEIC</span>
559
+ </button>
560
+ </div>
561
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6842.HEIC</p>
562
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
563
+ </li>
564
+ <li class="relative">
565
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
566
+ <img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
567
+ <button type="button" class="absolute inset-0 focus:outline-none">
568
+ <span class="sr-only">View details for IMG_3284.HEIC</span>
569
+ </button>
570
+ </div>
571
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_3284.HEIC</p>
572
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
573
+ </li>
574
+ <li class="relative">
575
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
576
+ <img src="https://images.unsplash.com/photo-1547036967-23d11aacaee0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
577
+ <button type="button" class="absolute inset-0 focus:outline-none">
578
+ <span class="sr-only">View details for IMG_4841.HEIC</span>
579
+ </button>
580
+ </div>
581
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4841.HEIC</p>
582
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
583
+ </li>
584
+ <li class="relative">
585
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
586
+ <img src="https://images.unsplash.com/photo-1492724724894-7464c27d0ceb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
587
+ <button type="button" class="absolute inset-0 focus:outline-none">
588
+ <span class="sr-only">View details for IMG_5644.HEIC</span>
589
+ </button>
590
+ </div>
591
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_5644.HEIC</p>
592
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
593
+ </li>
594
+ <li class="relative">
595
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
596
+ <img src="https://images.unsplash.com/photo-1513682322455-ea8b2d81d418?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
597
+ <button type="button" class="absolute inset-0 focus:outline-none">
598
+ <span class="sr-only">View details for IMG_4945.HEIC</span>
599
+ </button>
600
+ </div>
601
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4945.HEIC</p>
602
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
603
+ </li>
604
+ <li class="relative">
605
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
606
+ <img src="https://images.unsplash.com/photo-1463107971871-fbac9ddb920f?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
607
+ <button type="button" class="absolute inset-0 focus:outline-none">
608
+ <span class="sr-only">View details for IMG_2156.HEIC</span>
609
+ </button>
610
+ </div>
611
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_2156.HEIC</p>
612
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
613
+ </li>
614
+ <li class="relative">
615
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
616
+ <img src="https://images.unsplash.com/photo-1552461871-ce4f9fb3b438?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
617
+ <button type="button" class="absolute inset-0 focus:outline-none">
618
+ <span class="sr-only">View details for IMG_6945.HEIC</span>
619
+ </button>
620
+ </div>
621
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6945.HEIC</p>
622
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4.2 MB</p>
623
+ </li>
624
+ <li class="relative">
625
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
626
+ <img src="https://images.unsplash.com/photo-1446292532430-3e76f6ab6444?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
627
+ <button type="button" class="absolute inset-0 focus:outline-none">
628
+ <span class="sr-only">View details for IMG_1846.HEIC</span>
629
+ </button>
630
+ </div>
631
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1846.HEIC</p>
632
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.6 MB</p>
633
+ </li>
634
+ <li class="relative">
635
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
636
+ <img src="https://images.unsplash.com/photo-1508669232496-137b159c1cdb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
637
+ <button type="button" class="absolute inset-0 focus:outline-none">
638
+ <span class="sr-only">View details for IMG_4769.HEIC</span>
639
+ </button>
640
+ </div>
641
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_4769.HEIC</p>
642
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.3 MB</p>
643
+ </li>
644
+ <li class="relative">
645
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
646
+ <img src="https://images.unsplash.com/photo-1431512284068-4c4002298068?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
647
+ <button type="button" class="absolute inset-0 focus:outline-none">
648
+ <span class="sr-only">View details for IMG_9513.HEIC</span>
649
+ </button>
650
+ </div>
651
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_9513.HEIC</p>
652
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
653
+ </li>
654
+ <li class="relative">
655
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
656
+ <img src="https://images.unsplash.com/photo-1581320546160-0078de357255?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
657
+ <button type="button" class="absolute inset-0 focus:outline-none">
658
+ <span class="sr-only">View details for IMG_8451.HEIC</span>
659
+ </button>
660
+ </div>
661
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_8451.HEIC</p>
662
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.4 MB</p>
663
+ </li>
664
+ <li class="relative">
665
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
666
+ <img src="https://images.unsplash.com/photo-1541956628-68d338ae09d5?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
667
+ <button type="button" class="absolute inset-0 focus:outline-none">
668
+ <span class="sr-only">View details for IMG_1298.HEIC</span>
669
+ </button>
670
+ </div>
671
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1298.HEIC</p>
672
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4.1 MB</p>
673
+ </li>
674
+ <li class="relative">
675
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
676
+ <img src="https://images.unsplash.com/photo-1505429155379-441cc7a574f7?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
677
+ <button type="button" class="absolute inset-0 focus:outline-none">
678
+ <span class="sr-only">View details for IMG_6222.HEIC</span>
679
+ </button>
680
+ </div>
681
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6222.HEIC</p>
682
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4 MB</p>
683
+ </li>
684
+ <li class="relative">
685
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
686
+ <img src="https://images.unsplash.com/photo-1582029133746-96031e5c8d00?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
687
+ <button type="button" class="absolute inset-0 focus:outline-none">
688
+ <span class="sr-only">View details for IMG_7451.HEIC</span>
689
+ </button>
690
+ </div>
691
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_7451.HEIC</p>
692
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
693
+ </li>
694
+ <li class="relative">
695
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
696
+ <img src="https://images.unsplash.com/photo-1575868053350-9fd87f68f984?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
697
+ <button type="button" class="absolute inset-0 focus:outline-none">
698
+ <span class="sr-only">View details for IMG_9815.HEIC</span>
699
+ </button>
700
+ </div>
701
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_9815.HEIC</p>
702
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
703
+ </li>
704
+ <li class="relative">
705
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
706
+ <img src="https://images.unsplash.com/photo-1588391051471-1a5283d5a625?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
707
+ <button type="button" class="absolute inset-0 focus:outline-none">
708
+ <span class="sr-only">View details for IMG_1025.HEIC</span>
709
+ </button>
710
+ </div>
711
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1025.HEIC</p>
712
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.9 MB</p>
713
+ </li>
714
+ <li class="relative">
715
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
716
+ <img src="https://images.unsplash.com/photo-1575314146619-ec67b6213351?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
717
+ <button type="button" class="absolute inset-0 focus:outline-none">
718
+ <span class="sr-only">View details for IMG_6010.HEIC</span>
719
+ </button>
720
+ </div>
721
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_6010.HEIC</p>
722
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.1 MB</p>
723
+ </li>
724
+ <li class="relative">
725
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
726
+ <img src="https://images.unsplash.com/photo-1579874107960-e602329ef20a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
727
+ <button type="button" class="absolute inset-0 focus:outline-none">
728
+ <span class="sr-only">View details for IMG_1004.HEIC</span>
729
+ </button>
730
+ </div>
731
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_1004.HEIC</p>
732
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">4.4 MB</p>
733
+ </li>
734
+ <li class="relative">
735
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
736
+ <img src="https://images.unsplash.com/flagged/photo-1551385229-2925ed4eb53d?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
737
+ <button type="button" class="absolute inset-0 focus:outline-none">
738
+ <span class="sr-only">View details for IMG_8499.HEIC</span>
739
+ </button>
740
+ </div>
741
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_8499.HEIC</p>
742
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.4 MB</p>
743
+ </li>
744
+ <li class="relative">
745
+ <div class="aspect-w-10 aspect-h-7 group block w-full overflow-hidden rounded-lg bg-gray-100 focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100" x-state-description='undefined: "ring-2 ring-indigo-500 ring-offset-2", undefined: "focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 focus-within:ring-offset-gray-100"'>
746
+ <img src="https://images.unsplash.com/photo-1498575637358-821023f27355?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=512&amp;q=80" alt="" class="pointer-events-none object-cover group-hover:opacity-75" x-state-description='undefined: "", undefined: "group-hover:opacity-75"' />
747
+ <button type="button" class="absolute inset-0 focus:outline-none">
748
+ <span class="sr-only">View details for IMG_2154.HEIC</span>
749
+ </button>
750
+ </div>
751
+ <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-gray-900">IMG_2154.HEIC</p>
752
+ <p class="pointer-events-none block text-sm font-medium text-gray-500">3.8 MB</p>
753
+ </li>
754
+ </ul>
755
+ </section>
756
+ </div>
757
+ </main>
758
+
759
+ `;
760
+
761
+ e.$containerP.html(html);
762
+ }