futur.blue
forked from
pds.ls/pdsls
this repo has no description
buttons styling
+18
-7
src/views/collection.tsx
+18
-7
src/views/collection.tsx
···
5
import { A, useParams } from "@solidjs/router";
6
import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";
7
import { createStore } from "solid-js/store";
8
-
import { Button } from "../components/button.jsx";
9
import { JSONType, JSONValue } from "../components/json.jsx";
10
import { agent } from "../components/login.jsx";
11
import { TextInput } from "../components/text-input.jsx";
···
159
true,
160
);
161
162
onMount(() => {
163
let ticking = false;
164
const tick = () => {
···
192
class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
193
classList={{
194
"bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": filterStuck(),
195
-
"bg-transparent border-transparent shadow-none": !filterStuck(),
196
}}
197
>
198
-
<div class="z-20 flex w-[22rem] items-center gap-2 sm:w-[24rem]">
199
<Show when={agent() && agent()?.sub === did}>
200
<div class="flex items-center gap-x-2">
201
<Tooltip
···
254
/>
255
</div>
256
<Show when={records.length > 1}>
257
-
<div class="z-20 flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
258
-
<Button
259
onClick={() => {
260
setReverse(!reverse());
261
setRecords([]);
···
267
class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
268
></span>
269
Reverse
270
-
</Button>
271
<div>
272
<Show when={batchDelete()}>
273
<span>{records.filter((rec) => rec.toDelete).length}</span>
···
278
<div class="flex w-[5rem] items-center justify-end">
279
<Show when={cursor()}>
280
<Show when={!response.loading}>
281
-
<Button onClick={() => refetch()}>Load More</Button>
282
</Show>
283
<Show when={response.loading}>
284
<div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />
···
5
import { A, useParams } from "@solidjs/router";
6
import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";
7
import { createStore } from "solid-js/store";
8
+
import { Button, type ButtonProps } from "../components/button.jsx";
9
import { JSONType, JSONValue } from "../components/json.jsx";
10
import { agent } from "../components/login.jsx";
11
import { TextInput } from "../components/text-input.jsx";
···
159
true,
160
);
161
162
+
const NavigationButton = (props: ButtonProps) => {
163
+
return <Button
164
+
class="flex items-center gap-1 rounded-lg bg-white px-2 py-1.5 text-xs font-semibold border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md"
165
+
classList={{
166
+
"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50": !filterStuck(),
167
+
"dark:bg-dark-100 dark:hover:bg-dark-50 dark:active:bg-dark-50 bg-neutral-50 hover:bg-neutral-200 active:bg-neutral-200": filterStuck()
168
+
}}
169
+
{...props}
170
+
/>
171
+
}
172
+
173
onMount(() => {
174
let ticking = false;
175
const tick = () => {
···
203
class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
204
classList={{
205
"bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md": filterStuck(),
206
+
"bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),
207
}}
208
>
209
+
<div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
210
<Show when={agent() && agent()?.sub === did}>
211
<div class="flex items-center gap-x-2">
212
<Tooltip
···
265
/>
266
</div>
267
<Show when={records.length > 1}>
268
+
<div class="flex w-[22rem] items-center justify-between gap-x-2 sm:w-[24rem]">
269
+
<NavigationButton
270
onClick={() => {
271
setReverse(!reverse());
272
setRecords([]);
···
278
class={`iconify ${reverse() ? "lucide--rotate-ccw" : "lucide--rotate-cw"} text-sm`}
279
></span>
280
Reverse
281
+
</NavigationButton>
282
<div>
283
<Show when={batchDelete()}>
284
<span>{records.filter((rec) => rec.toDelete).length}</span>
···
289
<div class="flex w-[5rem] items-center justify-end">
290
<Show when={cursor()}>
291
<Show when={!response.loading}>
292
+
<NavigationButton onClick={() => refetch()}>Load More</NavigationButton>
293
</Show>
294
<Show when={response.loading}>
295
<div class="iconify lucide--loader-circle w-[5rem] animate-spin text-xl" />