Spaces:
Running
Running
Update src/components/icons.tsx
Browse files- 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">
|