Spaces:
Running
Running
// src/components/logo/Logo.tsx | |
import React from 'react'; | |
import cn from "classnames"; | |
// تغییر در این خط: به جای "@/components/icons" از مسیر نسبی "../icons" استفاده شده | |
import { humanAiIcon } from '../icons'; | |
type LogoProps = { | |
isMini: boolean; | |
isAi: boolean; | |
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", | |
"inset-0" | |
)}> | |
{humanAiIcon({ size: isMini ? 24 : 45 })} | |
</div> | |
</> | |
</div> | |
</div> | |
); | |
} |