forked from
pds.ls/pdsls
this repo has no description
prettier
+33
-19
+32
-18
src/views/collection.tsx
+32
-18
src/views/collection.tsx
···
3
3
import { $type, ActorIdentifier, InferXRPCBodyOutput } from "@atcute/lexicons";
4
4
import * as TID from "@atcute/tid";
5
5
import { A, useParams } from "@solidjs/router";
6
-
import { createEffect, createResource, createSignal, For, Show, untrack, onMount, onCleanup } from "solid-js";
6
+
import {
7
+
createEffect,
8
+
createResource,
9
+
createSignal,
10
+
For,
11
+
onCleanup,
12
+
onMount,
13
+
Show,
14
+
untrack,
15
+
} from "solid-js";
7
16
import { createStore } from "solid-js/store";
8
17
import { Button, type ButtonProps } from "../components/button.jsx";
9
18
import { JSONType, JSONValue } from "../components/json.jsx";
···
160
169
);
161
170
162
171
const FilterButton = (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
+
return (
173
+
<Button
174
+
class="flex items-center gap-1 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1.5 text-xs font-semibold shadow-md dark:border-neutral-700"
175
+
classList={{
176
+
"dark:bg-dark-300 dark:hover:bg-dark-100 dark:active:bg-dark-100 bg-white hover:bg-neutral-50 active:bg-neutral-50":
177
+
!filterStuck(),
178
+
"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":
179
+
filterStuck(),
180
+
}}
181
+
{...props}
182
+
/>
183
+
);
184
+
};
172
185
173
186
onMount(() => {
174
187
let ticking = false;
···
198
211
return (
199
212
<Show when={records.length || response()}>
200
213
<div class="flex w-full flex-col items-center">
201
-
<div
202
-
ref={(el) => (sticky = el)}
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
-
>
214
+
<div
215
+
ref={(el) => (sticky = el)}
216
+
class="sticky top-2 z-10 flex flex-col items-center justify-center gap-2 rounded-lg p-3 transition-colors"
217
+
classList={{
218
+
"bg-neutral-50 dark:bg-dark-300 border-[0.5px] border-neutral-300 dark:border-neutral-700 shadow-md":
219
+
filterStuck(),
220
+
"bg-transparent border-transparent shadow-none -mt-2": !filterStuck(),
221
+
}}
222
+
>
209
223
<div class="flex w-[22rem] items-center gap-2 sm:w-[24rem]">
210
224
<Show when={agent() && agent()?.sub === did}>
211
225
<div class="flex items-center gap-x-2">