leaflet.pub
a tool for shared writing and social publishing
some tweaks to post selector and combobox
cozylittle.house
+22
-29
app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
+22
-29
app/lish/[did]/[publication]/dashboard/PublicationAnalytics.tsx
···
55
55
<div className="flex justify-between items-center gap-2 pb-2 w-full">
56
56
<div className="flex gap-2 items-center">
57
57
<h3>Traffic</h3>
58
-
<ArrowRightTiny />
58
+
<ArrowRightTiny className="text-border" />
59
59
<PostSelector
60
60
selectedPost={selectedPost}
61
61
setSelectedPost={setSelectedPost}
62
62
/>
63
63
{selectedReferror && (
64
64
<>
65
-
<ArrowRightTiny />
66
-
{selectedReferror.name}
65
+
<ArrowRightTiny className="text-border" />
66
+
<div className="text-tertiary"> {selectedReferror.name}</div>
67
67
</>
68
68
)}
69
69
</div>
···
112
112
return (
113
113
<Combobox
114
114
trigger={
115
-
open ? (
116
-
<Input
117
-
autoFocus
118
-
placeholder="search posts…"
119
-
className="input-with-border py-0! text-primary"
120
-
value={searchValue}
121
-
onChange={(e) => setSearchValue(e.target.value)}
122
-
onClick={(e) => e.stopPropagation()}
123
-
onPointerDown={(e) => e.stopPropagation()}
124
-
/>
125
-
) : (
126
-
<button className="text-tertiary">
127
-
{props.selectedPost ?? "All Posts"}
128
-
</button>
129
-
)
115
+
<button className="text-tertiary">
116
+
{props.selectedPost ?? "All Posts"}
117
+
</button>
130
118
}
131
119
results={filteredPostsWithClear || []}
132
120
highlighted={highlighted}
···
135
123
props.setSelectedPost(highlighted);
136
124
}}
137
125
sideOffset={2}
126
+
searchValue={searchValue}
127
+
setSearchValue={setSearchValue}
128
+
showSearch
138
129
>
139
130
{filteredPostsWithClear.map((post) => {
140
131
if (post === "All Posts")
···
151
142
All Posts
152
143
</ComboboxResult>
153
144
{filteredPosts && filteredPosts.length !== 0 && (
154
-
<hr className="mx-1 text-tertiary" />
145
+
<hr className="mx-1 border-border-light" />
155
146
)}
156
147
</>
157
148
);
158
149
return (
159
-
<ComboboxResult
160
-
result={post}
161
-
onSelect={() => {
162
-
props.setSelectedPost(post);
163
-
}}
164
-
highlighted={highlighted}
165
-
setHighlighted={setHighlighted}
166
-
>
167
-
{post}
168
-
</ComboboxResult>
150
+
<>
151
+
<ComboboxResult
152
+
result={post}
153
+
onSelect={() => {
154
+
props.setSelectedPost(post);
155
+
}}
156
+
highlighted={highlighted}
157
+
setHighlighted={setHighlighted}
158
+
>
159
+
{post}
160
+
</ComboboxResult>
161
+
</>
169
162
);
170
163
})}
171
164
</Combobox>
+24
-1
components/Combobox.tsx
+24
-1
components/Combobox.tsx
···
2
2
import * as Popover from "@radix-ui/react-popover";
3
3
import { NestedCardThemeProvider } from "components/ThemeManager/ThemeProvider";
4
4
import { create } from "zustand";
5
+
import { Input } from "./Input";
5
6
6
7
export const useComboboxState = create(() => ({
7
8
open: false,
···
14
15
onOpenChange,
15
16
highlighted,
16
17
setHighlighted,
18
+
searchValue,
19
+
setSearchValue,
20
+
showSearch,
17
21
trigger,
18
22
triggerClassName,
19
23
sideOffset,
···
26
30
onOpenChange?: (open: boolean) => void;
27
31
highlighted: string | undefined;
28
32
setHighlighted: (h: string | undefined) => void;
33
+
searchValue?: string;
34
+
setSearchValue?: (s: string) => void;
35
+
showSearch?: boolean;
29
36
sideOffset?: number;
30
37
}) => {
31
38
let ref = useRef<HTMLDivElement>(null);
···
112
119
`}
113
120
>
114
121
<NestedCardThemeProvider>
115
-
<div className="commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page py-1 gap-0.5 border border-border rounded-md shadow-md">
122
+
<div
123
+
className={`commandMenuResults w-full max-h-(--radix-popover-content-available-height) overflow-auto flex flex-col group-data-[side=top]/cmd-menu:flex-col-reverse bg-bg-page gap-0.5 border border-border rounded-md shadow-md `}
124
+
>
125
+
{showSearch && setSearchValue ? (
126
+
<Input
127
+
autoFocus
128
+
placeholder="search…"
129
+
className={`px-3 pb-1 pt-1 text-primary focus-within:outline-none! focus:outline-none! focus-visible:outline-none! appearance-none bg-bg-page border-border-light border-b group-data-[side=top]/cmd-menu:border-t group-data-[side=top]/cmd-menu:border-b-0
130
+
sticky group-data-[side=top]/cmd-menu:bottom-0 top-0`}
131
+
value={searchValue}
132
+
onChange={(e) => setSearchValue(e.target.value)}
133
+
onClick={(e) => e.stopPropagation()}
134
+
onPointerDown={(e) => e.stopPropagation()}
135
+
/>
136
+
) : null}
137
+
<div className="space h-1 w-full bg-transparent" />
116
138
{children}
139
+
<div className="space h-1 w-full bg-transparent" />
117
140
</div>
118
141
</NestedCardThemeProvider>
119
142
</Popover.Content>