olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
rework repo arrow icon
handle.invalid
+9
-4
+9
-4
src/views/pds.tsx
+9
-4
src/views/pds.tsx
···
53
53
54
54
const RepoCard = (repo: ComAtprotoSyncListRepos.Repo) => {
55
55
const [expanded, setExpanded] = createSignal(false);
56
+
const [hovering, setHovering] = createSignal(false);
56
57
57
58
return (
58
59
<div class="flex flex-col gap-1">
59
-
<div class="flex items-start">
60
+
<div
61
+
class="dark:hover:bg-dark-200 flex min-w-0 flex-1 items-center rounded hover:bg-neutral-200/70"
62
+
onMouseEnter={() => setHovering(true)}
63
+
onMouseLeave={() => setHovering(false)}
64
+
>
60
65
<button
61
66
type="button"
62
67
onclick={() => setExpanded(!expanded())}
63
-
class="dark:hover:bg-dark-200 flex min-w-0 flex-1 items-center gap-2 rounded p-1.5 hover:bg-neutral-200/70"
68
+
class="flex min-w-0 flex-1 items-center gap-2 p-1.5"
64
69
>
65
70
<span class="mt-0.5 flex shrink-0 items-center text-neutral-400 dark:text-neutral-500">
66
71
{expanded() ?
···
79
84
</Show>
80
85
</div>
81
86
</button>
82
-
<Show when={expanded()}>
87
+
<Show when={expanded() || hovering()}>
83
88
<A
84
89
href={`/at://${repo.did}`}
85
-
class="flex size-7.5 shrink-0 items-center justify-center rounded text-neutral-500 transition-colors hover:bg-neutral-200 hover:text-neutral-600 active:bg-neutral-300 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:active:bg-neutral-600"
90
+
class="flex shrink-0 items-center p-2 transition-colors not-hover:text-neutral-500 not-hover:dark:text-neutral-400"
86
91
>
87
92
<span class="iconify lucide--arrow-right"></span>
88
93
</A>