// src/components/logo-animation/LogoAnimation.tsx import React from 'react'; import cn from 'classnames'; // آیکون انسان const SvgHumanIcon = () => ( ); // *** NEW: پیکربندی رنگ‌های لوگو به این کامپوننت منتقل شد *** const logoColorConfig = { blue: { // برای انسان ping: "bg-blue-200 dark:bg-blue-700", // حلقه پینگ ring1: "bg-blue-200 dark:bg-blue-700", // بیرونی ترین حلقه ثابت (مشابه پینگ) ring2: "bg-blue-300 dark:bg-blue-600", // حلقه میانی ring3: "bg-blue-400 dark:bg-blue-500", // داخلی ترین حلقه رنگی }, green: { // برای AI (اگر اضافه شود) ping: "bg-green-200 dark:bg-green-700", ring1: "bg-green-200 dark:bg-green-700", ring2: "bg-green-300 dark:bg-green-600", ring3: "bg-green-400 dark:bg-green-500", }, gray: { // پیش‌فرض ping: "bg-gray-200 dark:bg-gray-700", ring1: "bg-gray-200 dark:bg-gray-700", ring2: "bg-gray-300 dark:bg-gray-600", ring3: "bg-gray-400 dark:bg-gray-500", } }; interface LogoAnimationProps { isMini: boolean; isActive: boolean; type?: 'human' | 'ai'; forFooter?: boolean; } const LogoAnimation: React.FC = ({ isMini, isActive, type = 'human', forFooter = false, }) => { if (!isActive) return null; const colorKey = type === 'human' ? 'blue' : (type === 'ai' ? 'green' : 'gray'); // *** MODIFIED: استفاده از logoColorConfig داخلی *** const currentColors = logoColorConfig[colorKey as keyof typeof logoColorConfig] || logoColorConfig.gray; const size = isMini ? 80 : 200; const iconDisplaySize = isMini ? 35 : 70; const iconInset = (size - iconDisplaySize) / 2; // مقادیر inset برای حلقه‌ها بر اساس HTML مرجع شما // این مقادیر از HTML شما (`inset: 40px`, `inset: 0px`, `inset: 20px`, `inset: 50px` برای لوگوی بزرگ) // و (`inset: 10px`, `inset: 0px`, `inset: 5px`, `inset: 12px` برای لوگوی کوچک) استخراج شده‌اند. const insets = { ping: isMini ? "10px" : "40px", ring1: isMini ? "0px" : "0px", // بیرونی ترین حلقه ثابت ring2: isMini ? "5px" : "20px", // حلقه میانی ring3: isMini ? "12px" : "50px", // داخلی ترین حلقه رنگی (نزدیک آیکون) iconContainer: `${iconInset}px` }; const IconComponent = type === 'human' ? SvgHumanIcon : null; return (
{/* اطمینان حاصل کنید که Tailwind این کلاس‌های رنگی را می‌بیند */} {/* این div فقط برای این است که Tailwind کلاس‌ها را در build نهایی نگه دارد */} {/* شما می‌توانید این را در فایل tailwind.config.js در بخش safelist هم اضافه کنید */}
{/* حلقه پینگ */}
{/* حلقه بیرونی ثابت */}
{/* حلقه میانی */}
{/* حلقه داخلی */}
{/* کانتینر آیکون */}
{IconComponent && }
); }; export default LogoAnimation;