feat(back-button): enhance button styles and add variant support; refactor back navigation in sidebar and coins rules screen

src/app/_components/back-button.tsx

@@ -1,28 +1,64 @@
 "use client";
 
 import { ChevronLeft } from "lucide-react";
+import Link, { type LinkProps } from "next/link";
 
 import styles from "./back-button.module.css";
 
-export interface BackButtonProps {
-  onClick: () => void;
+interface BackButtonBaseProps {
   className?: string;
   ariaLabel?: string;
+  iconSize?: number;
+  variant?: "floating" | "soft" | "ghost";
 }
 
+type BackButtonLinkProps = BackButtonBaseProps & {
+  href: LinkProps["href"];
+  onClick?: never;
+};
+
+type BackButtonActionProps = BackButtonBaseProps & {
+  href?: never;
+  onClick: () => void;
+};
+
+export type BackButtonProps = BackButtonLinkProps | BackButtonActionProps;
+
 export function BackButton({
+  href,
   onClick,
   className,
   ariaLabel = "Back",
+  iconSize = 24,
+  variant = "floating",
 }: BackButtonProps) {
+  const buttonClassName = [
+    styles.backButton,
+    styles[variant],
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
+  const icon = (
+    <ChevronLeft size={iconSize} strokeWidth={2.5} aria-hidden="true" />
+  );
+
+  if (href) {
+    return (
+      <Link href={href} className={buttonClassName} aria-label={ariaLabel}>
+        {icon}
+      </Link>
+    );
+  }
+
   return (
     <button
       type="button"
-      className={[styles.backButton, className].filter(Boolean).join(" ")}
+      className={buttonClassName}
       onClick={onClick}
       aria-label={ariaLabel}
     >
-      <ChevronLeft size={20} strokeWidth={2.5} aria-hidden="true" />
+      {icon}
     </button>
   );
 }