feat: add Telegram button component to layout

Author: CodeWithEmad

app/layout.tsx

@@ -5,6 +5,7 @@ import Footer from '@/components/Footer'
 import { BackToTop } from '@/components/BackToTop'
 import EscapeButton from '@/components/EscapeButton'
 import Overlay from '@/components/Overlay'
+import TelegramButton from '@/components/TelegramButton'
 
 export const metadata: Metadata = {
   metadataBase: new URL('https://heretohelp.ir'),
@@ -76,6 +77,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           height={1080}
         />
         <EscapeButton />
+        <TelegramButton />
         <div className='mx-auto flex min-h-screen max-w-[1100px] flex-col px-4 sm:px-6 lg:px-8'>
           {children}
           <BackToTop />

components/TelegramButton.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import Telegram from '@/assets/icons/Telegram'
+
+export default function TelegramButton() {
+  const telegramUrl = process.env.NEXT_PUBLIC_TG_BOT_URL || 'https://t.me/iran_here_to_help_bot'
+
+  const handleClick = () => {
+    window.open(telegramUrl, '_blank', 'noopener,noreferrer')
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className='fixed bottom-4 left-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-blue-500 text-white shadow-lg transition-transform hover:scale-110'
+      aria-label='Open Telegram Bot'
+      title='ربات تلگرام ما'
+    >
+      <Telegram width={20} height={20} />
+    </button>
+  )
+}