Skip to content

Commit a71a4f2

Browse files
ErwanDecosterErwanDecoster
committed
refactor: update layout structure for improved responsiveness in various route components
1 parent ca2e37a commit a71a4f2

File tree

7 files changed

+133
-125
lines changed

7 files changed

+133
-125
lines changed

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

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -126,24 +126,25 @@ function AddressRoute() {
126126

127127
return (
128128
<div className="mt-8 flex flex-col gap-6">
129-
<SearcherBar className="py-6" />
130-
131-
<div className="space-y-2">
132-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
133-
<AddressIcon size={24} />
134-
Address details
135-
{!address && isError && (
136-
<span className="text-muted-foreground text-sm font-light">
137-
(outdated)
138-
</span>
139-
)}
140-
{(isLoading || isRefetching) && (
141-
<LoaderCircle className="animate-spin" />
142-
)}
143-
</h1>
144-
<div className="flex items-center gap-2">
145-
<BackButton />
146-
<AddressBreadcrumbs addressId={addressAddress} />
129+
<div className="flex flex-col justify-between lg:flex-row">
130+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0" />
131+
<div className="space-y-2">
132+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
133+
<AddressIcon size={24} />
134+
Address details
135+
{!address && isError && (
136+
<span className="text-muted-foreground text-sm font-light">
137+
(outdated)
138+
</span>
139+
)}
140+
{(isLoading || isRefetching) && (
141+
<LoaderCircle className="animate-spin" />
142+
)}
143+
</h1>
144+
<div className="flex items-center gap-2">
145+
<BackButton />
146+
<AddressBreadcrumbs addressId={addressAddress} />
147+
</div>
147148
</div>
148149
</div>
149150

‎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="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" />
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/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="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" />
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="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" />
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/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="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" />
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/tx/$txHash.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -95,24 +95,25 @@ function TransactionsRoute() {
9595

9696
return (
9797
<div className="mt-8 flex flex-col gap-6">
98-
<SearcherBar className="py-6" />
99-
100-
<div className="space-y-2">
101-
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
102-
<TransactionIcon size={24} />
103-
Transaction details
104-
{!transaction && isError && (
105-
<span className="text-muted-foreground text-sm font-light">
106-
(outdated)
107-
</span>
108-
)}
109-
{(isLoading || isRefetching) && (
110-
<LoaderCircle className="animate-spin" />
111-
)}
112-
</h1>
113-
<div className="flex items-center gap-2">
114-
<BackButton />
115-
<TransactionBreadcrumbs transactionId={txHash} />
98+
<div className="flex flex-col justify-between lg:flex-row">
99+
<SearcherBar className="py-6 lg:order-last lg:mr-0 lg:max-w-md lg:py-0" />
100+
<div className="space-y-2">
101+
<h1 className="flex items-center gap-2 font-sans text-2xl font-extrabold">
102+
<TransactionIcon size={24} />
103+
Transaction details
104+
{!transaction && isError && (
105+
<span className="text-muted-foreground text-sm font-light">
106+
(outdated)
107+
</span>
108+
)}
109+
{(isLoading || isRefetching) && (
110+
<LoaderCircle className="animate-spin" />
111+
)}
112+
</h1>
113+
<div className="flex items-center gap-2">
114+
<BackButton />
115+
<TransactionBreadcrumbs transactionId={txHash} />
116+
</div>
116117
</div>
117118
</div>
118119

‎src/routes/$chainSlug/_layout/workerpool/$workerpoolAddress.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -85,24 +85,25 @@ function WorkerpoolsRoute() {
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 text-2xl font-extrabold">
92-
<WorkerpoolIcon size={24} />
93-
Workerpool details
94-
{workerpool && 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-
<WorkerpoolBreadcrumbs workerpoolId={workerpoolAddress} />
88+
<div className="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" />
90+
<div className="space-y-2">
91+
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
92+
<WorkerpoolIcon size={24} />
93+
Workerpool details
94+
{workerpool && 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+
<WorkerpoolBreadcrumbs workerpoolId={workerpoolAddress} />
106+
</div>
106107
</div>
107108
</div>
108109

0 commit comments

Comments
 (0)