Feat/header ssr (#594)

web/app/components/base/avatar/index.tsx

@@ -1,39 +1,41 @@
 'use client'
 import cn from 'classnames'
 
-interface IAvatarProps {
+type AvatarProps = {
   name: string
   avatar?: string
   size?: number
   className?: string
+  textClassName?: string
 }
 const Avatar = ({
   name,
   avatar,
   size = 30,
-  className
-}: IAvatarProps) => {
-  const avatarClassName = `shrink-0 flex items-center rounded-full bg-primary-600`
-  const style = { width: `${size}px`, height:`${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
+  className,
+  textClassName,
+}: AvatarProps) => {
+  const avatarClassName = 'shrink-0 flex items-center rounded-full bg-primary-600'
+  const style = { width: `${size}px`, height: `${size}px`, fontSize: `${size}px`, lineHeight: `${size}px` }
 
   if (avatar) {
     return (
-      <img 
-        className={cn(avatarClassName, className)} 
+      <img
+        className={cn(avatarClassName, className)}
         style={style}
-        alt={name} 
+        alt={name}
         src={avatar}
       />
     )
   }
 
   return (
-    <div 
-      className={cn(avatarClassName, className)} 
+    <div
+      className={cn(avatarClassName, className)}
       style={style}
     >
-      <div 
-        className={`text-center text-white scale-[0.4]`} 
+      <div
+        className={cn(textClassName, 'text-center text-white scale-[0.4]')}
         style={style}
       >
         {name[0].toLocaleUpperCase()}
@@ -42,4 +44,4 @@ const Avatar = ({
   )
 }
 
-export default Avatar
+export default Avatar