Skip to content

Commit d4976f5

Browse files
ErwanDecosterErwanDecoster
authored
feat: move searchbar for better responsiveness (#68)
* fix: correct SearcherBar placement for improved layout structure * fix: refine focus-visible styles for Input and Select components
1 parent c448cff commit d4976f5

File tree

13 files changed

+213
-182
lines changed

13 files changed

+213
-182
lines changed

‎src/components/ui/input.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
88
data-slot="input"
99
className={cn(
1010
'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
11-
'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
11+
'focus-visible:border-ring',
1212
'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
1313
className
1414
)}

‎src/components/ui/select.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ function SelectTrigger({
3434
data-slot="select-trigger"
3535
data-size={size}
3636
className={cn(
37-
"border-secondary data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
37+
"border-secondary data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
3838
className
3939
)}
4040
{...props}

‎src/routes/$chainSlug/_layout/address/$addressAddress.tsx‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -153,7 +153,27 @@ function AddressRoute() {
153153

154154
return (
155155
<div className="mt-8 flex flex-col gap-6">
156-
<SearcherBar className="py-6" />
156+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
157+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
158+
<div className="space-y-2">
159+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
160+
<AddressIcon size={24} />
161+
Address details
162+
{!address && isError && (
163+
<span className="text-muted-foreground text-sm font-light">
164+
(outdated)
165+
</span>
166+
)}
167+
{(isLoading || isRefetching) && (
168+
<LoaderCircle className="animate-spin" />
169+
)}
170+
</h1>
171+
<div className="flex items-center gap-2">
172+
<BackButton />
173+
<AddressBreadcrumbs addressId={addressAddress} />
174+
</div>
175+
</div>
176+
</div>
157177

158178
<div className="space-y-2">
159179
{isError && error instanceof NotFoundError ? (

‎src/routes/$chainSlug/_layout/app/$appAddress.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -79,23 +79,25 @@ function AppsRoute() {
7979

8080
return (
8181
<div className="mt-8 flex flex-col gap-6">
82-
<SearcherBar className="py-6" />
83-
<div className="space-y-2">
84-
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
85-
<AppIcon size={24} />
86-
App details
87-
{app && isError && (
88-
<span className="text-muted-foreground text-sm font-light">
89-
(outdated)
90-
</span>
91-
)}
92-
{(isLoading || isRefetching) && (
93-
<LoaderCircle className="animate-spin" />
94-
)}
95-
</h1>
96-
<div className="flex items-center gap-2">
97-
<BackButton />
98-
<AppBreadcrumbs appId={appAddress} />
82+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
83+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
84+
<div className="space-y-2">
85+
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
86+
<AppIcon size={24} />
87+
App details
88+
{app && isError && (
89+
<span className="text-muted-foreground text-sm font-light">
90+
(outdated)
91+
</span>
92+
)}
93+
{(isLoading || isRefetching) && (
94+
<LoaderCircle className="animate-spin" />
95+
)}
96+
</h1>
97+
<div className="flex items-center gap-2">
98+
<BackButton />
99+
<AppBreadcrumbs appId={appAddress} />
100+
</div>
99101
</div>
100102
</div>
101103

‎src/routes/$chainSlug/_layout/apps.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -80,24 +80,25 @@ function AppsRoute() {
8080

8181
return (
8282
<div className="mt-8 grid gap-6">
83-
<SearcherBar className="py-6" />
84-
85-
<div className="space-y-2">
86-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87-
<AppIcon size={24} />
88-
Apps deployed
89-
{data.length > 0 && isError && (
90-
<span className="text-muted-foreground text-sm font-light">
91-
(outdated)
92-
</span>
93-
)}
94-
{isLoading && isRefetching && (
95-
<LoaderCircle className="animate-spin" />
96-
)}
97-
</h1>
98-
<div className="flex items-center gap-2">
99-
<BackButton />
100-
<AppBreadcrumbsList />
83+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
84+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
85+
<div className="space-y-2">
86+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87+
<AppIcon size={24} />
88+
Apps deployed
89+
{data.length > 0 && isError && (
90+
<span className="text-muted-foreground text-sm font-light">
91+
(outdated)
92+
</span>
93+
)}
94+
{isLoading && isRefetching && (
95+
<LoaderCircle className="animate-spin" />
96+
)}
97+
</h1>
98+
<div className="flex items-center gap-2">
99+
<BackButton />
100+
<AppBreadcrumbsList />
101+
</div>
101102
</div>
102103
</div>
103104

‎src/routes/$chainSlug/_layout/dataset/$datasetAddress.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -114,24 +114,25 @@ function DatasetsRoute() {
114114

115115
return (
116116
<div className="mt-8 flex flex-col gap-6">
117-
<SearcherBar className="py-6" />
118-
119-
<div className="space-y-2">
120-
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
121-
<DatasetIcon size={24} />
122-
Dataset details
123-
{dataset.data && dataset.isError && (
124-
<span className="text-muted-foreground text-sm font-light">
125-
(outdated)
126-
</span>
127-
)}
128-
{(dataset.isLoading || dataset.isRefetching) && (
129-
<LoaderCircle className="animate-spin" />
130-
)}
131-
</h1>
132-
<div className="flex items-center gap-2">
133-
<BackButton />
134-
<DatasetBreadcrumbs datasetId={datasetAddress} />
117+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
118+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
119+
<div className="space-y-2">
120+
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
121+
<DatasetIcon size={24} />
122+
Dataset details
123+
{dataset.data && dataset.isError && (
124+
<span className="text-muted-foreground text-sm font-light">
125+
(outdated)
126+
</span>
127+
)}
128+
{(dataset.isLoading || dataset.isRefetching) && (
129+
<LoaderCircle className="animate-spin" />
130+
)}
131+
</h1>
132+
<div className="flex items-center gap-2">
133+
<BackButton />
134+
<DatasetBreadcrumbs datasetId={datasetAddress} />
135+
</div>
135136
</div>
136137
</div>
137138

‎src/routes/$chainSlug/_layout/deal/$dealId.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,24 +85,25 @@ function DealsRoute() {
8585

8686
return (
8787
<div className="mt-8 flex flex-col gap-6">
88-
<SearcherBar className="py-6" />
89-
90-
<div className="space-y-2">
91-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
92-
<DealIcon size={24} />
93-
Deal details
94-
{!deal && isError && (
95-
<span className="text-muted-foreground text-sm font-light">
96-
(outdated)
97-
</span>
98-
)}
99-
{(isLoading || isRefetching) && (
100-
<LoaderCircle className="animate-spin" />
101-
)}
102-
</h1>
103-
<div className="flex items-center gap-2">
104-
<BackButton />
105-
<DealBreadcrumbs dealId={dealId} />
88+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
89+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
90+
<div className="space-y-2">
91+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
92+
<DealIcon size={24} />
93+
Deal details
94+
{!deal && isError && (
95+
<span className="text-muted-foreground text-sm font-light">
96+
(outdated)
97+
</span>
98+
)}
99+
{(isLoading || isRefetching) && (
100+
<LoaderCircle className="animate-spin" />
101+
)}
102+
</h1>
103+
<div className="flex items-center gap-2">
104+
<BackButton />
105+
<DealBreadcrumbs dealId={dealId} />
106+
</div>
106107
</div>
107108
</div>
108109

‎src/routes/$chainSlug/_layout/deals.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -80,24 +80,25 @@ function DealsRoute() {
8080

8181
return (
8282
<div className="mt-8 grid gap-6">
83-
<SearcherBar className="py-6" />
84-
85-
<div className="space-y-2">
86-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87-
<DealIcon size={24} />
88-
Deals
89-
{data.length > 0 && isError && (
90-
<span className="text-muted-foreground text-sm font-light">
91-
(outdated)
92-
</span>
93-
)}
94-
{(isLoading || isRefetching) && (
95-
<LoaderCircle className="animate-spin" />
96-
)}
97-
</h1>
98-
<div className="flex items-center gap-2">
99-
<BackButton />
100-
<AllDealsBreadcrumbs />
83+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
84+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
85+
<div className="space-y-2">
86+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87+
<DealIcon size={24} />
88+
Deals
89+
{data.length > 0 && isError && (
90+
<span className="text-muted-foreground text-sm font-light">
91+
(outdated)
92+
</span>
93+
)}
94+
{(isLoading || isRefetching) && (
95+
<LoaderCircle className="animate-spin" />
96+
)}
97+
</h1>
98+
<div className="flex items-center gap-2">
99+
<BackButton />
100+
<AllDealsBreadcrumbs />
101+
</div>
101102
</div>
102103
</div>
103104
{hasPastError && !data.length ? (

‎src/routes/$chainSlug/_layout/task/$taskId.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -77,24 +77,25 @@ function TasksRoute() {
7777

7878
return (
7979
<div className="mt-8 flex flex-col gap-6">
80-
<SearcherBar className="py-6" />
81-
82-
<div className="space-y-2">
83-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
84-
<TaskIcon size={24} />
85-
Task details
86-
{!task && isError && (
87-
<span className="text-muted-foreground text-sm font-light">
88-
(outdated)
89-
</span>
90-
)}
91-
{(isLoading || isRefetching) && (
92-
<LoaderCircle className="animate-spin" />
93-
)}
94-
</h1>
95-
<div className="flex items-center gap-2">
96-
<BackButton />
97-
<TaskBreadcrumbs taskId={taskId} />
80+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
81+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
82+
<div className="space-y-2">
83+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
84+
<TaskIcon size={24} />
85+
Task details
86+
{!task && isError && (
87+
<span className="text-muted-foreground text-sm font-light">
88+
(outdated)
89+
</span>
90+
)}
91+
{(isLoading || isRefetching) && (
92+
<LoaderCircle className="animate-spin" />
93+
)}
94+
</h1>
95+
<div className="flex items-center gap-2">
96+
<BackButton />
97+
<TaskBreadcrumbs taskId={taskId} />
98+
</div>
9899
</div>
99100
</div>
100101

‎src/routes/$chainSlug/_layout/tasks.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -80,24 +80,25 @@ function TasksRoute() {
8080

8181
return (
8282
<div className="mt-8 grid gap-6">
83-
<SearcherBar className="py-6" />
84-
85-
<div className="space-y-2">
86-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87-
<TaskIcon size={24} />
88-
Tasks
89-
{data.length > 0 && isError && (
90-
<span className="text-muted-foreground text-sm font-light">
91-
(outdated)
92-
</span>
93-
)}
94-
{(isLoading || isRefetching) && (
95-
<LoaderCircle className="animate-spin" />
96-
)}
97-
</h1>
98-
<div className="flex items-center gap-2">
99-
<BackButton />
100-
<TaskBreadcrumbsList />
83+
<div className="mt-6 flex flex-col justify-between lg:flex-row">
84+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0 xl:max-w-xl" />
85+
<div className="space-y-2">
86+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
87+
<TaskIcon size={24} />
88+
Tasks
89+
{data.length > 0 && isError && (
90+
<span className="text-muted-foreground text-sm font-light">
91+
(outdated)
92+
</span>
93+
)}
94+
{(isLoading || isRefetching) && (
95+
<LoaderCircle className="animate-spin" />
96+
)}
97+
</h1>
98+
<div className="flex items-center gap-2">
99+
<BackButton />
100+
<TaskBreadcrumbsList />
101+
</div>
101102
</div>
102103
</div>
103104
{hasPastError && !data.length ? (

0 commit comments

Comments
 (0)