forked from
pds.ls/pdsls
atmosphere explorer
redesign repo info modal
+28
-17
+28
-17
src/views/pds.tsx
+28
-17
src/views/pds.tsx
···
56
56
const [openInfo, setOpenInfo] = createSignal(false);
57
57
58
58
return (
59
-
<div class="flex items-center">
59
+
<div class="flex items-center gap-0.5">
60
60
<A
61
61
href={`/at://${repo.did}`}
62
62
class="grow truncate rounded-md p-0.5 font-mono hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
···
75
75
<span class="iconify lucide--info"></span>
76
76
</button>
77
77
<Modal open={openInfo()} onClose={() => setOpenInfo(false)}>
78
-
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-3 wrap-break-word shadow-md transition-opacity duration-200 sm:max-w-lg dark:border-neutral-700 starting:opacity-0">
79
-
<div class="mb-1 flex justify-between gap-2">
80
-
<div class="flex items-center gap-1">
81
-
<span class="iconify lucide--info"></span>
82
-
<span class="font-semibold">{repo.did}</span>
83
-
</div>
78
+
<div class="dark:bg-dark-300 dark:shadow-dark-700 absolute top-70 left-[50%] w-max max-w-full -translate-x-1/2 rounded-lg border-[0.5px] border-neutral-300 bg-white p-3 shadow-md transition-opacity duration-200 sm:max-w-xl dark:border-neutral-700 starting:opacity-0">
79
+
<div class="mb-2 flex items-center justify-between gap-4">
80
+
<p class="truncate font-semibold">{repo.did}</p>
84
81
<button
85
82
onclick={() => setOpenInfo(false)}
86
-
class="flex items-center rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
83
+
class="flex shrink-0 items-center rounded-md p-1.5 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 active:bg-neutral-200 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-200 dark:active:bg-neutral-600"
87
84
>
88
85
<span class="iconify lucide--x"></span>
89
86
</button>
90
87
</div>
91
-
<div class="flex flex-col text-sm">
92
-
<span>
93
-
Head: <span class="text-xs">{repo.head}</span>
94
-
</span>
88
+
<div class="grid grid-cols-[auto_1fr] items-baseline gap-x-1 text-sm">
89
+
<span class="font-medium">Head:</span>
90
+
<span class="wrap-anywhere text-neutral-700 dark:text-neutral-300">{repo.head}</span>
91
+
95
92
<Show when={TID.validate(repo.rev)}>
96
-
<span>
97
-
Rev: {repo.rev} ({localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)})
98
-
</span>
93
+
<span class="font-medium">Rev:</span>
94
+
<div class="flex flex-col">
95
+
<span class="text-neutral-700 dark:text-neutral-300">{repo.rev}</span>
96
+
<span class="text-neutral-600 dark:text-neutral-400">
97
+
{localDateFromTimestamp(TID.parse(repo.rev).timestamp / 1000)}
98
+
</span>
99
+
</div>
99
100
</Show>
101
+
100
102
<Show when={repo.active !== undefined}>
101
-
<span>Active: {repo.active ? "true" : "false"}</span>
103
+
<span class="font-medium">Active:</span>
104
+
<span
105
+
class={`iconify self-center ${
106
+
repo.active ?
107
+
"lucide--check text-green-500 dark:text-green-400"
108
+
: "lucide--x text-red-500 dark:text-red-400"
109
+
}`}
110
+
></span>
102
111
</Show>
112
+
103
113
<Show when={repo.status}>
104
-
<span>Status: {repo.status}</span>
114
+
<span class="font-medium">Status:</span>
115
+
<span class="text-neutral-700 dark:text-neutral-300">{repo.status}</span>
105
116
</Show>
106
117
</div>
107
118
</div>