Skip to content

Commit 676996a

Browse files
ErwanDecosterErwanDecoster
authored
feat: add BackButton component and integrate into various routes (#41)
* feat: add BackButton component and integrate into various routes for improved navigation. * style: update scrollbar thumb color for improved UI consistency * fix: update table body styles for improved hover effects * feat: refactor Footer component to separate social links into a new SocialLinksItems component and enhance navigation links for improved user experience
1 parent e642af4 commit 676996a

File tree

17 files changed

+134
-53
lines changed

17 files changed

+134
-53
lines changed

‎src/components/Footer.tsx‎

Lines changed: 44 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,7 @@ import iExecLogo from '../assets/iexec-logo.svg';
1313
import { ChainLink } from './ChainLink';
1414
import { Button } from './ui/button';
1515

16-
export function Footer({ className }: { className?: string }) {
17-
const { chainId } = useUserStore();
18-
19-
const navLinks = [
20-
{ href: 'https://www.iex.ec/', label: 'iExec Website' },
21-
{ href: getBlockExplorerUrl(chainId), label: 'Block explorer' },
22-
{ href: 'https://www.iex.ec/contact', label: 'Contact Us' },
23-
];
24-
16+
function SocialLinksItems({ className }: { className?: string }) {
2517
const socialLinks = [
2618
{ href: 'https://twitter.com/iEx_ec', icon: <SiX size={16} /> },
2719
{ href: 'https://discord.gg/pbt9m98wnU', icon: <SiDiscord size={16} /> },
@@ -36,6 +28,36 @@ export function Footer({ className }: { className?: string }) {
3628
},
3729
{ href: 'https://medium.com/iex-ec', icon: <SiMedium size={16} /> },
3830
];
31+
return (
32+
<div className={cn('flex', className)}>
33+
{socialLinks.map(({ href, icon }, idx) => (
34+
<Button key={idx} asChild variant="link" className="text-grey-200 p-2">
35+
<a
36+
href={href}
37+
target="_blank"
38+
rel="noopener noreferrer"
39+
aria-label="Social link"
40+
>
41+
{icon}
42+
</a>
43+
</Button>
44+
))}
45+
</div>
46+
);
47+
}
48+
49+
export function Footer({ className }: { className?: string }) {
50+
const { chainId } = useUserStore();
51+
52+
const navLinks = [
53+
{ href: 'https://www.iex.ec/', label: 'iExec Website' },
54+
{ href: 'https://tools.docs.iex.ec/', label: 'Doc tools' },
55+
{ href: 'https://protocol.docs.iex.ec/', label: 'Doc protocol' },
56+
...(chainId !== undefined
57+
? [{ href: getBlockExplorerUrl(chainId), label: 'Block explorer' }]
58+
: []),
59+
{ href: 'https://www.iex.ec/contact', label: 'Contact Us' },
60+
];
3961

4062
const startYear = 2017;
4163
const currentYear = new Date().getFullYear();
@@ -47,17 +69,17 @@ export function Footer({ className }: { className?: string }) {
4769
return (
4870
<footer
4971
className={cn(
50-
'bg-grey-800 border-muted text-grey-200 relative rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
72+
'bg-grey-800 border-muted text-grey-200 flex flex-col gap-6 rounded-3xl border px-6 py-10 sm:px-10 lg:px-20',
5173
className
5274
)}
5375
>
54-
<div className="grid place-items-center justify-center gap-10 xl:grid-cols-2 xl:place-items-stretch">
76+
<div className="flex flex-col items-center justify-between gap-10 xl:flex-row">
5577
<ChainLink to="/" className="flex items-center gap-2 font-mono">
5678
<img src={iExecLogo} width="25" height="25" alt="iExec logo" />
5779
<span>iExec Explorer</span>
5880
</ChainLink>
5981

60-
<nav className="flex flex-col items-center gap-2 sm:flex-row sm:gap-4 xl:absolute xl:left-1/2 xl:-translate-x-1/2">
82+
<nav className="flex flex-col items-center gap-2 md:flex-row md:gap-4">
6183
{navLinks.map(({ href, label }, idx) => (
6284
<div key={idx} className="flex items-center gap-2">
6385
<Button
@@ -70,37 +92,22 @@ export function Footer({ className }: { className?: string }) {
7092
</a>
7193
</Button>
7294
{idx < navLinks.length - 1 && (
73-
<span className="bg-grey-200 hidden size-1.5 rounded-full sm:block" />
95+
<span className="bg-grey-200 hidden size-1.5 rounded-full md:block" />
7496
)}
7597
</div>
7698
))}
7799
</nav>
78-
79-
<div className="flex items-center xl:justify-end">
80-
{socialLinks.map(({ href, icon }, idx) => (
81-
<Button
82-
key={idx}
83-
asChild
84-
variant="link"
85-
className="text-grey-200 p-2"
86-
>
87-
<a
88-
href={href}
89-
target="_blank"
90-
rel="noopener noreferrer"
91-
aria-label="Social link"
92-
>
93-
{icon}
94-
</a>
95-
</Button>
96-
))}
97-
</div>
100+
<SocialLinksItems className="xl:hidden" />
98101
</div>
99102

100-
<hr className="border-grey-500 mt-10 mb-4" />
101-
<p className="w-full text-center text-sm">
102-
© All Rights Reserved {displayYear}
103-
</p>
103+
<hr className="border-grey-500" />
104+
105+
<div className="flex justify-between">
106+
<p className="w-full text-center text-sm xl:text-left">
107+
© All Rights Reserved {displayYear}
108+
</p>
109+
<SocialLinksItems className="hidden xl:flex" />
110+
</div>
104111
</footer>
105112
);
106113
}

‎src/components/ui/BackButton.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { useRouter, useCanGoBack } from '@tanstack/react-router';
2+
import { ChevronLeft } from 'lucide-react';
3+
import { Button } from './button';
4+
5+
export function BackButton({ className = '' }: { className?: string }) {
6+
const router = useRouter();
7+
const canGoBack = useCanGoBack();
8+
9+
if (!canGoBack) return null;
10+
11+
return (
12+
<Button
13+
variant="outline"
14+
size="sm"
15+
className={`text-grey-400 border-grey-300 pr-4! uppercase ${className}`}
16+
onClick={() => router.history.back()}
17+
>
18+
<ChevronLeft />
19+
Back
20+
</Button>
21+
);
22+
}

‎src/components/ui/table.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ function TableBody({
3838
<tbody
3939
data-slot="table-body"
4040
className={cn(
41-
'[&_tr]:border-muted *:bg-grey-900 [&_tr]:hover:*:bg-grey-700/80 [&_tr]:*:duration-150 [&_tr:last-child]:border-0',
42-
zebra && '[&_tr]:odd:*:bg-grey-800 [&_tr]:odd:hover:*:bg-grey-700/80',
41+
'[&_tr]:border-muted *:bg-grey-900 [&_tr]:hover:*:bg-grey-700 [&_tr]:*:duration-150 [&_tr:last-child]:border-0',
42+
zebra && '[&_tr]:odd:*:bg-grey-800 [&_tr]:odd:hover:*:bg-grey-700',
4343
className
4444
)}
4545
{...props}

‎src/index.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -274,7 +274,7 @@
274274
}
275275

276276
*::-webkit-scrollbar-thumb {
277-
@apply bg-grey-700 rounded-full;
277+
@apply bg-grey-500 rounded-full;
278278
}
279279
*::-webkit-scrollbar-track {
280280
@apply bg-grey-800 rounded-full;

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { Stepper } from '@/components/Stepper';
1010
import IexecAccountIcon from '@/components/icons/IexecAccountIcon';
1111
import WalletIcon from '@/components/icons/WalletIcon';
1212
import { ChainSelector } from '@/components/navbar/ChainSelector';
13+
import { BackButton } from '@/components/ui/BackButton';
1314
import { Button } from '@/components/ui/button';
1415
import { getIExec } from '@/externals/iexecSdkClient';
1516
import { useLoginLogout } from '@/hooks/useLoginLogout';
@@ -184,7 +185,10 @@ function RouteComponent() {
184185

185186
return (
186187
<div className="mt-8 flex flex-col gap-10">
187-
<AccountBreadcrumbs />
188+
<div className="flex items-center gap-2">
189+
<BackButton />
190+
<AccountBreadcrumbs />
191+
</div>
188192
<div className="flex flex-col items-center gap-2">
189193
<h1 className="flex items-center gap-2 text-2xl font-extrabold">
190194
IExec Wallet Manager

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { createFileRoute } from '@tanstack/react-router';
55
import { LoaderCircle } from 'lucide-react';
66
import { useState } from 'react';
77
import AddressIcon from '@/components/icons/AddressIcon';
8+
import { BackButton } from '@/components/ui/BackButton';
89
import { DetailsTable } from '@/modules/DetailsTable';
910
import { ErrorAlert } from '@/modules/ErrorAlert';
1011
import { Tabs } from '@/modules/Tabs';
@@ -132,7 +133,10 @@ function AddressRoute() {
132133
<LoaderCircle className="animate-spin" />
133134
)}
134135
</h1>
135-
<AddressBreadcrumbs addressId={addressAddress} />
136+
<div className="flex items-center gap-2">
137+
<BackButton />
138+
<AddressBreadcrumbs addressId={addressAddress} />
139+
</div>
136140
</div>
137141

138142
{hasPastError && !addressOverview ? (

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
55
import { LoaderCircle } from 'lucide-react';
66
import AppIcon from '@/components/icons/AppIcon';
7+
import { BackButton } from '@/components/ui/BackButton';
78
import { DetailsTable } from '@/modules/DetailsTable';
89
import { ErrorAlert } from '@/modules/ErrorAlert';
910
import { AppBreadcrumbs } from '@/modules/apps/app/AppBreadcrumbs';
@@ -92,7 +93,10 @@ function AppsRoute() {
9293
<LoaderCircle className="animate-spin" />
9394
)}
9495
</h1>
95-
<AppBreadcrumbs appId={appAddress} />
96+
<div className="flex items-center gap-2">
97+
<BackButton />
98+
<AppBreadcrumbs appId={appAddress} />
99+
</div>
96100
</div>
97101

98102
<div className="space-y-10">

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { LoaderCircle } from 'lucide-react';
66
import { DataTable } from '@/components/DataTable';
77
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
88
import AppIcon from '@/components/icons/AppIcon';
9+
import { BackButton } from '@/components/ui/BackButton';
910
import { usePageParam } from '@/hooks/usePageParam';
1011
import { ErrorAlert } from '@/modules/ErrorAlert';
1112
import { AppBreadcrumbsList } from '@/modules/apps/AppBreadcrumbs';
@@ -94,7 +95,10 @@ function AppsRoute() {
9495
<LoaderCircle className="animate-spin" />
9596
)}
9697
</h1>
97-
<AppBreadcrumbsList />
98+
<div className="flex items-center gap-2">
99+
<BackButton />
100+
<AppBreadcrumbsList />
101+
</div>
98102
</div>
99103

100104
{hasPastError && !data.length ? (

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { useQuery } from '@tanstack/react-query';
44
import { createFileRoute } from '@tanstack/react-router';
55
import { LoaderCircle } from 'lucide-react';
66
import DatasetIcon from '@/components/icons/DatasetIcon';
7+
import { BackButton } from '@/components/ui/BackButton';
78
import { DetailsTable } from '@/modules/DetailsTable';
89
import { ErrorAlert } from '@/modules/ErrorAlert';
910
import { DatasetBreadcrumbs } from '@/modules/datasets/dataset/DatasetBreadcrumbs';
@@ -95,7 +96,10 @@ function DatasetsRoute() {
9596
<LoaderCircle className="animate-spin" />
9697
)}
9798
</h1>
98-
<DatasetBreadcrumbs datasetId={datasetAddress} />
99+
<div className="flex items-center gap-2">
100+
<BackButton />
101+
<DatasetBreadcrumbs datasetId={datasetAddress} />
102+
</div>
99103
</div>
100104

101105
<div className="space-y-10">

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { LoaderCircle } from 'lucide-react';
66
import { DataTable } from '@/components/DataTable';
77
import { PaginatedNavigation } from '@/components/PaginatedNavigation';
88
import DatasetIcon from '@/components/icons/DatasetIcon';
9+
import { BackButton } from '@/components/ui/BackButton';
910
import { usePageParam } from '@/hooks/usePageParam';
1011
import { ErrorAlert } from '@/modules/ErrorAlert';
1112
import { DatasetBreadcrumbsList } from '@/modules/datasets/DatasetBreadcrumbs';
@@ -94,7 +95,10 @@ function DatasetsRoute() {
9495
<LoaderCircle className="animate-spin" />
9596
)}
9697
</h1>
97-
<DatasetBreadcrumbsList />
98+
<div className="flex items-center gap-2">
99+
<BackButton />
100+
<DatasetBreadcrumbsList />
101+
</div>
98102
</div>
99103

100104
{hasPastError && !data.length ? (

0 commit comments

Comments
 (0)