token page back button

blockworks-foundation · Dec 20, 2023 · 335beb5 · 335beb5 · vercel · Dec 20, 2023
1 parent 517df9a
commit 335beb5
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/app/(pages)/token/[slug]/layout.tsx b/app/(pages)/token/[slug]/layout.tsx
@@ -1,5 +1,4 @@
-import { ArrowLeftIcon } from '@heroicons/react/20/solid'
-import Link from 'next/link'
+import BackButton from '../../../components/shared/BackButton'
 
 export default function TokenPageLayout({
   children,
@@ -9,14 +8,7 @@ export default function TokenPageLayout({
   return (
     <div className="px-6 lg:px-20 pb-12 pt-8 max-w-[1280px] mx-auto min-h-screen">
       <div className="-mt-6">
-        <Link
-          className="text-th-fgd-4 flex items-center space-x-1"
-          href="/explore"
-          shallow
-        >
-          <ArrowLeftIcon className="h-5 w-5" />
-          <span>View all tokens</span>
-        </Link>
+        <BackButton />
         <div className="mt-8">{children}</div>
       </div>
     </div>

diff --git a/app/components/shared/BackButton.tsx b/app/components/shared/BackButton.tsx
@@ -0,0 +1,19 @@
+'use client'
+
+import { ArrowLeftIcon } from '@heroicons/react/20/solid'
+import { useRouter } from 'next/navigation'
+
+const BackButton = () => {
+  const router = useRouter()
+  return (
+    <button
+      className="text-th-fgd-4 flex items-center space-x-1 focus:outline-none md:hover:text-th-fgd-2"
+      onClick={() => router.back()}
+    >
+      <ArrowLeftIcon className="h-5 w-5" />
+      <span>Back</span>
+    </button>
+  )
+}
+
+export default BackButton
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo