vielle.dev
forked from
pds.ls/pdsls
atproto explorer
justify between collection buttons
handle.invalid
+18
-20
src/views/collection.tsx
+18
-20
src/views/collection.tsx
···
211
onInput={(e) => setFilter(e.currentTarget.value)}
212
/>
213
</div>
214
-
<div class="flex items-center gap-x-2">
215
-
<Show when={records.length > 1}>
216
<Button
217
onClick={() => {
218
setReverse(!reverse());
···
224
<div class={`${reverse() ? "i-lucide-rotate-ccw" : "i-lucide-rotate-cw"} text-sm`} />
225
Reverse
226
</Button>
227
-
</Show>
228
-
<div>
229
-
<Show when={batchDelete()}>
230
-
<span>{records.filter((rec) => rec.toDelete).length}</span>
231
-
<span>/</span>
232
-
</Show>
233
-
<span>
234
-
{records.length} record{records.length > 1 ? "s" : ""}
235
-
</span>
236
-
</div>
237
-
<Show when={cursor()}>
238
-
<div class="flex w-[5rem] items-center justify-center">
239
-
<Show when={!response.loading}>
240
-
<Button onClick={() => refetch()}>Load More</Button>
241
</Show>
242
-
<Show when={response.loading}>
243
-
<div class="i-lucide-loader-circle animate-spin text-xl" />
244
</Show>
245
</div>
246
-
</Show>
247
-
</div>
248
</div>
249
<div class="flex max-w-full flex-col font-mono">
250
<For
···
211
onInput={(e) => setFilter(e.currentTarget.value)}
212
/>
213
</div>
214
+
<Show when={records.length > 1}>
215
+
<div class="w-22rem sm:w-24rem flex items-center justify-between gap-x-2">
216
<Button
217
onClick={() => {
218
setReverse(!reverse());
···
224
<div class={`${reverse() ? "i-lucide-rotate-ccw" : "i-lucide-rotate-cw"} text-sm`} />
225
Reverse
226
</Button>
227
+
<div>
228
+
<Show when={batchDelete()}>
229
+
<span>{records.filter((rec) => rec.toDelete).length}</span>
230
+
<span>/</span>
231
</Show>
232
+
<span>{records.length} records</span>
233
+
</div>
234
+
<div class="flex w-[5rem] items-center justify-center">
235
+
<Show when={cursor()}>
236
+
<Show when={!response.loading}>
237
+
<Button onClick={() => refetch()}>Load More</Button>
238
+
</Show>
239
+
<Show when={response.loading}>
240
+
<div class="i-lucide-loader-circle animate-spin text-xl" />
241
+
</Show>
242
</Show>
243
</div>
244
+
</div>
245
+
</Show>
246
</div>
247
<div class="flex max-w-full flex-col font-mono">
248
<For