change avatar layout

Author: dev-masih

src/components/avatar-card/index.tsx

@@ -11,12 +11,8 @@ interface AvatarCardProps {
 }
 
 /**
- * Renders an AvatarCard component.
- * @param profile - The profile object.
- * @param loading - A boolean indicating if the profile is loading.
- * @param avatarRing - A boolean indicating if the avatar should have a ring.
- * @param resumeFileUrl - The URL of the resume file.
- * @returns JSX element representing the AvatarCard.
+ * Renders an AvatarCard component with avatar on the left,
+ * name and bio on the right, and resume button centered below.
  */
 const AvatarCard: React.FC<AvatarCardProps> = ({
   profile,
@@ -25,11 +21,13 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
   resumeFileUrl,
 }): React.JSX.Element => {
   return (
-    <div className="card shadow-lg card-sm bg-base-100">
-      <div className="grid place-items-center py-8">
+    <div className="card shadow-lg card-sm bg-base-100 p-8">
+      {/* Top section: avatar left, text right */}
+      <div className="flex flex-col md:flex-row items-center md:items-start gap-8">
+        {/* Avatar */}
         {loading || !profile ? (
           <div className="avatar opacity-90">
-            <div className="mb-8 rounded-full w-32 h-32">
+            <div className="rounded-full w-32 h-32">
               {skeleton({
                 widthCls: 'w-full',
                 heightCls: 'h-full',
@@ -40,27 +38,27 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
         ) : (
           <div className="avatar opacity-90">
             <div
-              className={`mb-8 rounded-full w-32 h-32 ${
+              className={`rounded-full w-32 h-32 ${
                 avatarRing
                   ? 'ring-3 ring-primary ring-offset-base-100 ring-offset-2'
                   : ''
               }`}
             >
-              {
-                <LazyImage
-                  src={profile.avatar ? profile.avatar : FALLBACK_IMAGE}
-                  alt={profile.name}
-                  placeholder={skeleton({
-                    widthCls: 'w-full',
-                    heightCls: 'h-full',
-                    shape: '',
-                  })}
-                />
-              }
+              <LazyImage
+                src={profile.avatar ? profile.avatar : FALLBACK_IMAGE}
+                alt={profile.name}
+                placeholder={skeleton({
+                  widthCls: 'w-full',
+                  heightCls: 'h-full',
+                  shape: '',
+                })}
+              />
             </div>
           </div>
         )}
-        <div className="text-center mx-auto px-8">
+
+        {/* Name + Bio */}
+        <div className="flex-1 text-center md:text-left">
           <h5 className="font-bold text-2xl">
             {loading || !profile ? (
               skeleton({ widthCls: 'w-48', heightCls: 'h-8' })
@@ -76,25 +74,29 @@ const AvatarCard: React.FC<AvatarCardProps> = ({
               : profile.bio}
           </div>
         </div>
-        {resumeFileUrl &&
-          (loading ? (
-            <div className="mt-6">
-              {skeleton({ widthCls: 'w-40', heightCls: 'h-8' })}
-            </div>
-          ) : (
+      </div>
+
+      {/* Resume button centered below */}
+      {resumeFileUrl &&
+        (loading ? (
+          <div className="mt-6 flex justify-center">
+            {skeleton({ widthCls: 'w-40', heightCls: 'h-8' })}
+          </div>
+        ) : (
+          <div className="mt-6 flex justify-center">
             <a
               href={resumeFileUrl}
               target="_blank"
-              className="btn btn-outline btn-sm text-xs mt-6 opacity-50"
+              className="btn btn-outline btn-sm text-xs opacity-50"
               download
               rel="noreferrer"
             >
               Download Resume
             </a>
-          ))}
-      </div>
+          </div>
+        ))}
     </div>
   );
 };
 
-export default AvatarCard;
+export default AvatarCard;