revert(ui): بازگردانی کامپوننت Button (ButtonLink) — وابستگی ساختار قدیمی جزئیات پروژه

UI v1 این کامپوننت را حذف کرده بود؛ ساختار قدیمی صفحهٔ جزئیات پروژه به آن وابسته است (دکمهٔ بازگشت به فهرست پروژه‌ها).
2026-09-28 09:41:11 +00:00
parent 11552d6124
commit dc7a92f040
1 changed files with 110 additions and 0 deletions
@@ -0,0 +1,110 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+type Variant = 'copper' | 'outline' | 'dark' | 'dark-ivory'
+
+type BaseProps = {
+  children: React.ReactNode
+  variant?: Variant
+  className?: string
+}
+
+// استایل‌های فوق‌لوکس شیشه‌ای (Glassmorphic) با رنگ‌های اختصاصی پروژه
+const STYLES: Record<Variant, { base: string; fill: string; text: string; glow: string }> = {
+  copper: {
+    // دکمه اصلی: شیشه دودی تیره با خط نوری مسی، هاله بازتاب و حاشیه کریستالی
+    base: 'bg-char/75 backdrop-blur-xl text-ivory border border-copper/50 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_8px_20px_rgba(0,0,0,0.4)]',
+    fill: 'bg-gradient-to-r from-copper via-[#d89f6e] to-copper',
+    text: 'group-hover:text-char font-semibold',
+    glow: 'hover:border-copper hover:shadow-[0_0_30px_rgba(197,143,92,0.5)]',
+  },
+  outline: {
+    // دکمه ثانویه: شیشه دودی کاملاً مات (Frosted Smoked Glass) با بازتاب لبه‌ها
+    base: 'bg-white/[0.04] backdrop-blur-xl border border-white/20 text-ivory shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_8px_20px_rgba(0,0,0,0.3)]',
+    fill: 'bg-white/10',
+    text: 'group-hover:text-copper',
+    glow: 'hover:border-copper/70 hover:bg-white/[0.08] hover:shadow-[0_0_25px_rgba(197,143,92,0.25)]',
+  },
+  dark: {
+    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
+    fill: 'bg-copper',
+    text: 'group-hover:text-char',
+    glow: 'hover:border-copper/50 hover:shadow-[0_0_20px_rgba(197,143,92,0.3)]',
+  },
+  'dark-ivory': {
+    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
+    fill: 'bg-ivory',
+    text: 'group-hover:text-char',
+    glow: 'hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]',
+  },
+}
+
+function Inner({ children, variant = 'copper' }: { children: React.ReactNode; variant?: Variant }) {
+  const style = STYLES[variant]
+  return (
+    <>
+      {/* خط انعکاس نوری شیشه در بالای دکمه */}
+      <span className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/20 to-transparent" />
+
+      {/* انیمیشن پر شدن موجی و نرم */}
+      <span
+        aria-hidden="true"
+        className={`absolute inset-0 translate-y-full rounded-full transition-transform duration-500 ease-out group-hover:translate-y-0 ${style.fill}`}
+      />
+
+      {/* متن و آیکون دکمه */}
+      <span
+        className={`relative z-10 flex items-center justify-center gap-3 transition-colors duration-400 ease-out ${style.text}`}
+      >
+        {children}
+      </span>
+    </>
+  )
+}
+
+// بدنه اصلی دکمه: کپسول کامل (rounded-full)، کلیک نرم (active:scale-95) و انتقال شیشه‌ای
+const SHELL =
+  'group relative inline-flex items-center justify-center overflow-hidden rounded-full px-8 py-3.5 text-sm font-medium tracking-wide focus:outline-none focus-visible:ring-2 focus-visible:ring-copper focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:scale-[0.98] transition-all duration-400 ease-out cursor-pointer select-none'
+
+export function ButtonLink({
+  to,
+  children,
+  variant = 'copper',
+  className = '',
+}: BaseProps & { to: string }) {
+  const style = STYLES[variant]
+  return (
+    <Link to={to} className={`${SHELL} ${style.base} ${style.glow} ${className}`}>
+      <Inner variant={variant}>{children}</Inner>
+    </Link>
+  )
+}
+
+export function ButtonAnchor({
+  href,
+  children,
+  variant = 'copper',
+  className = '',
+  ...rest
+}: BaseProps & { href: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const style = STYLES[variant]
+  return (
+    <a href={href} className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
+      <Inner variant={variant}>{children}</Inner>
+    </a>
+  )
+}
+
+export function Button({
+  children,
+  variant = 'copper',
+  className = '',
+  ...rest
+}: BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>) {
+  const style = STYLES[variant]
+  return (
+    <button className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
+      <Inner variant={variant}>{children}</Inner>
+    </button>
+  )
+}