Update src/components/icons.tsx

src/components/icons.tsx

@@ -2,24 +2,44 @@
 
 import React from 'react';
 
-// آیکون جدید با قابلیت انیمیشن موجی بر اساس حجم صدای کاربر
-export const PauseIconWithPulse = ({ userVolume = 0 }: { userVolume: number }) => {
-  const barHeight = 24.2; 
-  const yBase = 6.4;
-  const animatedHeight = Math.min(barHeight, 8 + userVolume * 50);
+// آیکون جدید Pause که انیمیشن موجی را در اطراف خطوط نمایش می‌دهد
+export const PauseIconWithSurroundPulse = ({ userVolume = 0 }: { userVolume: number }) => {
+  // بر اساس حجم صدا، مقیاس و شفافیت امواج را تغییر می‌دهیم
+  const waveScale = 1 + userVolume * 2;
+  const waveOpacity = Math.min(1, userVolume * 5);
 
   return (
     <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+      {/* دایره موجی پس‌زمینه که با صدای کاربر بزرگ می‌شود */}
+      <circle 
+        cx="18.5" 
+        cy="18.5" 
+        r="18" 
+        fill="#fecdd3" // رنگ صورتی خیلی روشن برای موج
+        opacity={waveOpacity}
+        style={{
+          transformOrigin: 'center',
+          transform: `scale(${waveScale})`,
+          transition: 'transform 0.1s ease-out, opacity 0.1s ease-out'
+        }} 
+      />
+      {/* خطوط ثابت pause در لایه رویی */}
       <path d="M15.9872 29.6198V8.28342C15.9872 6.25781 15.132 5.44757 12.9713 5.44757H7.52469C5.36404 5.44757 4.50879 6.25781 4.50879 8.28342V29.6198C4.50879 31.6454 5.36404 32.4556 7.52469 32.4556H12.9713C15.132 32.4556 15.9872 31.6454 15.9872 29.6198Z" fill="#BE123C"/>
       <path opacity="0.4" d="M31.5175 29.6198V8.28342C31.5175 6.25781 30.6622 5.44757 28.5016 5.44757H23.055C20.9093 5.44757 20.0391 6.25781 20.0391 8.28342V29.6198C20.0391 31.6454 20.8943 32.4556 23.055 32.4556H28.5016C30.6622 32.4556 31.5175 31.6454 31.5175 29.6198Z" fill="#BE123C"/>
-      <rect x="4.5" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#e11d48" style={{ transition: 'all 0.05s ease-out' }}/>
-      <rect x="20" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#f43f5e" style={{ transition: 'all 0.05s ease-out' }}/>
     </svg>
   );
 };
 
-export const pauseIcon = <PauseIconWithPulse userVolume={0} />;
+// نسخه ثابت برای نمایش اولیه
+export const pauseIcon = (
+    <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M15.9872 29.6198V8.28342C15.9872 6.25781 15.132 5.44757 12.9713 5.44757H7.52469C5.36404 5.44757 4.50879 6.25781 4.50879 8.28342V29.6198C4.50879 31.6454 5.36404 32.4556 7.52469 32.4556H12.9713C15.132 32.4556 15.9872 31.6454 15.9872 29.6198Z" fill="#BE123C"/>
+      <path opacity="0.4" d="M31.5175 29.6198V8.28342C31.5175 6.25781 30.6622 5.44757 28.5016 5.44757H23.055C20.9093 5.44757 20.0391 6.25781 20.0391 8.28342V29.6198C20.0391 31.6454 20.8943 32.4556 23.055 32.4556H28.5016C30.6622 32.4556 31.5175 31.6454 31.5175 29.6198Z" fill="#BE123C"/>
+    </svg>
+);
+
 
+// بقیه آیکون‌ها بدون تغییر باقی می‌مانند
 export const microphoneIcon = (
   <svg width="69" height="68" viewBox="0 0 69 68" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path opacity="0.4" d="M49.9479 27.1824C49.0803 27.1824 48.3907 27.872 48.3907 28.7396V32.2544C48.3907 40.1293 41.984 46.5361 34.109 46.5361C26.234 46.5361 19.8273 40.1293 19.8273 32.2544V28.7173C19.8273 27.8497 19.1377 27.1601 18.2701 27.1601C17.4025 27.1601 16.7129 27.8497 16.7129 28.7173V32.2321C16.7129 41.2861 23.6758 48.7384 32.5518 49.5393V54.2776C32.5518 55.1452 33.2414 55.8348 34.109 55.8348C34.9766 55.8348 35.6662 55.1452 35.6662 54.2776V49.5393C44.52 48.7607 51.5051 41.2861 51.5051 32.2321V28.7173C51.4829 27.872 50.7933 27.1824 49.9479 27.1824Z" fill="#BE123C"/>