vielle.dev
forked from
pds.ls/pdsls
atproto explorer
cleanup search component
handle.invalid
+15
-18
src/components/search.tsx
+15
-18
src/components/search.tsx
···
43
43
if (useLocation().pathname !== "/") searchInput.focus();
44
44
});
45
45
46
-
const processInput = async (input: string) => {
46
+
const processInput = (input: string) => {
47
47
input = input.trim().replace(/^@/, "");
48
48
if (!input.length) return;
49
49
setShowSearch(false);
···
65
65
66
66
return (
67
67
<form
68
-
class="flex w-full max-w-[22rem] flex-col sm:max-w-[24rem]"
69
-
id="uriForm"
68
+
class="w-[22rem] sm:w-[24rem]"
70
69
onsubmit={(e) => {
71
70
e.preventDefault();
72
71
processInput(searchInput.value);
···
75
74
<label for="input" class="hidden">
76
75
PDS URL, AT URI, or handle
77
76
</label>
78
-
<div class="flex w-full items-center gap-2">
79
-
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex grow items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
80
-
<input
81
-
type="text"
82
-
spellcheck={false}
83
-
placeholder="PDS URL, AT URI, or handle"
84
-
ref={searchInput}
85
-
id="input"
86
-
class="grow select-none placeholder:text-sm focus:outline-none"
87
-
/>
88
-
<button
89
-
type="submit"
90
-
class="iconify lucide--arrow-right text-lg text-neutral-500 dark:text-neutral-400"
91
-
></button>
92
-
</div>
77
+
<div class="dark:bg-dark-100 dark:shadow-dark-800 flex items-center gap-2 rounded-lg border-[0.5px] border-neutral-300 bg-white px-2 py-1 shadow-xs focus-within:outline-[1.5px] focus-within:outline-neutral-900 dark:border-neutral-700 dark:focus-within:outline-neutral-200">
78
+
<input
79
+
type="text"
80
+
spellcheck={false}
81
+
placeholder="PDS URL, AT URI, or handle"
82
+
ref={searchInput}
83
+
id="input"
84
+
class="grow select-none placeholder:text-sm focus:outline-none"
85
+
/>
86
+
<button
87
+
type="submit"
88
+
class="iconify lucide--arrow-right text-lg text-neutral-500 dark:text-neutral-400"
89
+
></button>
93
90
</div>
94
91
</form>
95
92
);