vielle.dev
forked from
pds.ls/pdsls
atproto explorer
add x next to info if validation error
handle.invalid
+22
-13
src/views/record.tsx
+22
-13
src/views/record.tsx
···
129
129
return template(parsedUri, record);
130
130
};
131
131
132
-
const RecordTab = (props: { tab: "record" | "backlinks" | "info"; label: string }) => (
133
-
<A
134
-
classList={{
135
-
"flex items-center gap-1 border-b-2": true,
136
-
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":
137
-
(!!location.hash && location.hash !== `#${props.tab}`) ||
138
-
(!location.hash && props.tab !== "record"),
139
-
}}
140
-
href={`/at://${did}/${params.collection}/${params.rkey}#${props.tab}`}
141
-
>
142
-
{props.label}
143
-
</A>
132
+
const RecordTab = (props: {
133
+
tab: "record" | "backlinks" | "info";
134
+
label: string;
135
+
error?: boolean;
136
+
}) => (
137
+
<div class="flex items-center gap-0.5">
138
+
<A
139
+
classList={{
140
+
"flex items-center gap-1 border-b-2": true,
141
+
"border-transparent hover:border-neutral-400 dark:hover:border-neutral-600":
142
+
(!!location.hash && location.hash !== `#${props.tab}`) ||
143
+
(!location.hash && props.tab !== "record"),
144
+
}}
145
+
href={`/at://${did}/${params.collection}/${params.rkey}#${props.tab}`}
146
+
>
147
+
{props.label}
148
+
</A>
149
+
<Show when={props.error && (validRecord() === false || validSchema() === false)}>
150
+
<span class="iconify lucide--x text-red-500 dark:text-red-400"></span>
151
+
</Show>
152
+
</div>
144
153
);
145
154
146
155
return (
···
150
159
<div class="flex gap-3">
151
160
<RecordTab tab="record" label="Record" />
152
161
<RecordTab tab="backlinks" label="Backlinks" />
153
-
<RecordTab tab="info" label="Info" />
162
+
<RecordTab tab="info" label="Info" error />
154
163
</div>
155
164
<div class="flex gap-1">
156
165
<Show when={agent() && agent()?.sub === record()?.uri.split("/")[2]}>