Ezmary commited on
Commit
6534e55
·
verified ·
1 Parent(s): 233e6fa

Update src/components/icons.tsx

Browse files
Files changed (1) hide show
  1. src/components/icons.tsx +0 -7
src/components/icons.tsx CHANGED
@@ -1,7 +1,6 @@
1
  // src/components/icons.tsx
2
 
3
  import React from 'react';
4
- import cn from "classnames";
5
 
6
  // آیکون جدید با قابلیت انیمیشن موجی بر اساس حجم صدای کاربر
7
  export const PauseIconWithPulse = ({ userVolume = 0 }: { userVolume: number }) => {
@@ -11,11 +10,8 @@ export const PauseIconWithPulse = ({ userVolume = 0 }: { userVolume: number }) =
11
 
12
  return (
13
  <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
14
- {/* نوار ثابت پس‌زمینه */}
15
  <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"/>
16
  <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"/>
17
-
18
- {/* موج متحرک روی نوارها */}
19
  <rect x="4.5" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#e11d48" style={{ transition: 'all 0.05s ease-out' }}/>
20
  <rect x="20" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#f43f5e" style={{ transition: 'all 0.05s ease-out' }}/>
21
  </svg>
@@ -50,18 +46,15 @@ export const stopCamIcon = (
50
  </svg>
51
  );
52
 
53
- // آیکون اصلی با قابلیت انیمیشن بخش "انسان"
54
  export const humanAiIcon = ({ size, isUserSpeaking }: {
55
  size: number,
56
  isUserSpeaking?: boolean
57
  }) => {
58
- // با استفاده از CSS transform و transition انیمیشن را اعمال می‌کنیم
59
  const humanStyle: React.CSSProperties = {
60
  transition: 'transform 0.2s ease-in-out',
61
  transform: isUserSpeaking ? 'scale(1.1)' : 'scale(1)',
62
  transformOrigin: 'center'
63
  };
64
-
65
  return (
66
  <svg width={2 * size} height={size} viewBox="0 0 116 58" fill="none" xmlns="http://www.w3.org/2000/svg">
67
  <g className="ai-part" stroke="white" fill="none">
 
1
  // src/components/icons.tsx
2
 
3
  import React from 'react';
 
4
 
5
  // آیکون جدید با قابلیت انیمیشن موجی بر اساس حجم صدای کاربر
6
  export const PauseIconWithPulse = ({ userVolume = 0 }: { userVolume: number }) => {
 
10
 
11
  return (
12
  <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
 
13
  <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"/>
14
  <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"/>
 
 
15
  <rect x="4.5" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#e11d48" style={{ transition: 'all 0.05s ease-out' }}/>
16
  <rect x="20" y={yBase + (barHeight - animatedHeight)} width="11.5" height={animatedHeight} fill="#f43f5e" style={{ transition: 'all 0.05s ease-out' }}/>
17
  </svg>
 
46
  </svg>
47
  );
48
 
 
49
  export const humanAiIcon = ({ size, isUserSpeaking }: {
50
  size: number,
51
  isUserSpeaking?: boolean
52
  }) => {
 
53
  const humanStyle: React.CSSProperties = {
54
  transition: 'transform 0.2s ease-in-out',
55
  transform: isUserSpeaking ? 'scale(1.1)' : 'scale(1)',
56
  transformOrigin: 'center'
57
  };
 
58
  return (
59
  <svg width={2 * size} height={size} viewBox="0 0 116 58" fill="none" xmlns="http://www.w3.org/2000/svg">
60
  <g className="ai-part" stroke="white" fill="none">