forked from
pds.ls/pdsls
atmosphere explorer
cleanup car component
+13
-63
+12
-54
src/views/car/unpack.tsx
+12
-54
src/views/car/unpack.tsx
···
1
1
import { fromStream } from "@atcute/repo";
2
2
import { zip, type ZipEntry } from "@mary/zip";
3
3
import { Title } from "@solidjs/meta";
4
-
import { A } from "@solidjs/router";
5
4
import { FileSystemWritableFileStream, showSaveFilePicker } from "native-file-system-adapter";
6
-
import { createSignal, onCleanup, Show } from "solid-js";
5
+
import { createSignal, onCleanup } from "solid-js";
7
6
import { createLogger, LoggerView } from "./logger.jsx";
8
-
import { isIOS, toJsonValue } from "./shared.jsx";
7
+
import { isIOS, toJsonValue, WelcomeView } from "./shared.jsx";
9
8
10
9
// HACK: Disable compression on WebKit due to an error being thrown
11
10
const isWebKit =
···
179
178
};
180
179
181
180
return (
182
-
<div class="flex w-full max-w-3xl flex-col gap-y-4 px-2">
181
+
<>
183
182
<Title>Unpack archive - PDSls</Title>
184
-
<div class="flex flex-col gap-y-1">
185
-
<div class="flex items-center gap-2 text-lg">
186
-
<A
187
-
href="/car"
188
-
class="flex size-7 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-700 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200"
189
-
>
190
-
<span class="iconify lucide--arrow-left" />
191
-
</A>
192
-
<h1 class="font-semibold">Unpack archive</h1>
193
-
</div>
194
-
<p class="text-sm text-neutral-600 dark:text-neutral-400">
195
-
Upload a CAR file to extract all records into a ZIP archive.
196
-
</p>
197
-
</div>
198
-
199
-
<div
200
-
class="dark:bg-dark-300 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-neutral-300 bg-neutral-50 p-8 transition-colors hover:border-neutral-400 dark:border-neutral-600 dark:hover:border-neutral-500"
183
+
<WelcomeView
184
+
title="Unpack archive"
185
+
subtitle="Upload a CAR file to extract all records into a ZIP archive."
186
+
loading={pending()}
187
+
onFileChange={handleFileChange}
201
188
onDrop={handleDrop}
202
189
onDragOver={handleDragOver}
203
-
>
204
-
<Show
205
-
when={!pending()}
206
-
fallback={
207
-
<div class="flex flex-col items-center gap-2">
208
-
<span class="iconify lucide--loader-circle animate-spin text-3xl text-neutral-400" />
209
-
<span class="text-sm font-medium text-neutral-600 dark:text-neutral-400">
210
-
Processing...
211
-
</span>
212
-
</div>
213
-
}
214
-
>
215
-
<span class="iconify lucide--folder-archive text-3xl text-neutral-400" />
216
-
<div class="text-center">
217
-
<p class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
218
-
Drag and drop a CAR file here
219
-
</p>
220
-
<p class="text-xs text-neutral-500 dark:text-neutral-400">or</p>
221
-
</div>
222
-
<label class="dark:hover:bg-dark-200 dark:shadow-dark-700 dark:active:bg-dark-100 box-border flex h-8 cursor-pointer items-center justify-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 px-3 py-1.5 text-sm shadow-xs select-none hover:bg-neutral-100 active:bg-neutral-200 dark:border-neutral-700 dark:bg-neutral-800">
223
-
<input
224
-
type="file"
225
-
accept={isIOS ? undefined : ".car,application/vnd.ipld.car"}
226
-
onChange={handleFileChange}
227
-
class="hidden"
228
-
/>
229
-
<span class="iconify lucide--upload text-sm" />
230
-
Choose file
231
-
</label>
232
-
</Show>
190
+
/>
191
+
<div class="w-full max-w-3xl px-2">
192
+
<LoggerView logger={logger} />
233
193
</div>
234
-
235
-
<LoggerView logger={logger} />
236
-
</div>
194
+
</>
237
195
);
238
196
};