Create src/components/logo/Logo.tsx

src/components/logo/Logo.tsx

@@ -0,0 +1,64 @@
+// src/components/logo/Logo.tsx
+
+import React from 'react';
+import cn from "classnames";
+import { humanAiIcon } from "@/components/icons"; // مسیر را به ../icons تغییر می‌دهیم
+
+type LogoProps = {
+  isMini: boolean;
+  isAi: boolean; // توجه: در کد شما فقط از حالت isAi=false استفاده می‌شود
+  isActive: boolean;
+}
+
+export default function Logo({isAi, isActive, isMini}: LogoProps) {
+
+  if (!isActive) return null;
+
+  return (
+    <div className={cn("w-fit flex items-center justify-center")}>
+      {/* loads colors for tailwind */}
+      <div className={"hidden bg-green-200 bg-green-300 bg-green-400 bg-blue-200 bg-blue-300 bg-blue-400 dark:bg-green-700 dark:bg-green-600 dark:bg-green-500 dark:bg-blue-700 dark:bg-blue-600 dark:bg-blue-500"}>
+        color pre-loader
+      </div>
+
+      <div className={cn("relative", isMini ? "w-[80px] h-[80px]" : "w-[200px] h-[200px]")}>
+          <>
+            <div
+              className={cn(
+                "absolute rounded-full opacity-50 animate-ping",
+                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
+                isMini ? "inset-[10px]" : "inset-[40px]",
+              )}
+            />
+            <div
+              className={cn(
+                "absolute inset-0 rounded-full opacity-50",
+                isAi ? "bg-green-200 dark:bg-green-700" : "bg-blue-200 dark:bg-blue-700",
+              )}
+            />
+            <div
+              className={cn(
+                "absolute rounded-full opacity-50",
+                isAi ? "bg-green-300 dark:bg-green-600" : "bg-blue-300 dark:bg-blue-600",
+                isMini ? "inset-[5px]" : "inset-[20px]",
+              )}
+            />
+            <div
+              className={cn(
+                "absolute rounded-full opacity-50",
+                isAi ? "bg-green-400 dark:bg-green-500" : "bg-blue-400 dark:bg-blue-500",
+                isMini ? "inset-[12px]" : "inset-[50px]",
+              )}
+            />
+
+            <div className={cn(
+                "z-10 absolute flex items-center justify-center text-white", // text-white اضافه شد
+                "inset-0" // از inset-0 برای پوشش کامل استفاده می‌کنیم
+                )}>
+              {humanAiIcon({ size: isMini ? 24 : 45 })}
+            </div>
+          </>
+      </div>
+    </div>
+  );
+}