Enhance BackButton: add router integration for navigation and improve responsiveness with hidden text on small screens

web/components/back-button.tsx

@@ -1,9 +1,11 @@
 import {ChevronLeftIcon} from '@heroicons/react/24/outline'
 import clsx from 'clsx'
+import {useRouter} from 'next/router'
 import React, {useEffect, useState} from 'react'
 
 export function BackButton(props: {className?: string}) {
   const {className} = props
+  const router = useRouter()
   const [canGoBack, setCanGoBack] = useState(false)
 
   // Can't put this in a useMemo to avoid the page jump else we'll get hydration errors.
@@ -16,13 +18,14 @@ export function BackButton(props: {className?: string}) {
   return (
     <button
       type="button"
+      onClick={() => router.back()}
       className={clsx(
         'text-ink-500 hover:text-primary-700 inline-flex items-center gap-2 text-sm transition-all',
         className,
       )}
     >
       <ChevronLeftIcon className="h-4 w-4" />
-      Back
+      <span className={' hidden sm:flex'}>Back</span>
     </button>
   )
 }