olaren.dev
forked from
pds.ls/pdsls
atmosphere explorer
make the entire handle clickable
handle.invalid
+30
-26
+30
-26
src/views/repo.tsx
+30
-26
src/views/repo.tsx
···
506
506
<p class="font-semibold">Aliases</p>
507
507
<For each={didDocument().alsoKnownAs}>
508
508
{(alias) => (
509
-
<div class="flex items-center gap-1 text-sm text-neutral-700 dark:text-neutral-300">
510
-
<span>{alias}</span>
511
-
<Show when={alias.startsWith("at://")}>
512
-
<button
513
-
class="flex items-center rounded p-0.5 hover:bg-neutral-200 dark:hover:bg-neutral-700"
514
-
onClick={async () => {
515
-
setHandleDetailedResult(null);
516
-
setHandleModalAlias(alias);
517
-
const handle = alias.replace("at://", "") as Handle;
518
-
const result = await resolveHandleDetailed(handle);
519
-
if (handleModalAlias() === alias)
520
-
setHandleDetailedResult(result);
509
+
<Show
510
+
when={alias.startsWith("at://")}
511
+
fallback={
512
+
<div class="text-sm text-neutral-700 dark:text-neutral-300">
513
+
{alias}
514
+
</div>
515
+
}
516
+
>
517
+
<button
518
+
class="-ml-1 flex w-fit items-center gap-1 rounded px-1 py-0.5 text-sm text-neutral-700 hover:bg-neutral-200 dark:text-neutral-300 dark:hover:bg-neutral-700"
519
+
onClick={async () => {
520
+
setHandleDetailedResult(null);
521
+
setHandleModalAlias(alias);
522
+
const handle = alias.replace("at://", "") as Handle;
523
+
const result = await resolveHandleDetailed(handle);
524
+
if (handleModalAlias() === alias) setHandleDetailedResult(result);
525
+
}}
526
+
>
527
+
<span>{alias}</span>
528
+
<span
529
+
classList={{
530
+
"iconify text-base lucide--check text-green-600 dark:text-green-400":
531
+
validHandles[alias] === true,
532
+
"iconify lucide--x text-red-500 dark:text-red-400":
533
+
validHandles[alias] === false,
534
+
"iconify lucide--loader-circle animate-spin":
535
+
validHandles[alias] === undefined,
521
536
}}
522
-
>
523
-
<span
524
-
classList={{
525
-
"iconify text-base lucide--check text-green-600 dark:text-green-400":
526
-
validHandles[alias] === true,
527
-
"iconify lucide--x text-red-500 dark:text-red-400":
528
-
validHandles[alias] === false,
529
-
"iconify lucide--loader-circle animate-spin":
530
-
validHandles[alias] === undefined,
531
-
}}
532
-
></span>
533
-
</button>
534
-
</Show>
535
-
</div>
537
+
></span>
538
+
</button>
539
+
</Show>
536
540
)}
537
541
</For>
538
542
</div>