feat: integrate Avatar component across various modules for improved user representation and enhance profile page with Gravatar support

src/components/ui/Avatar.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { getGravatarUrl, GravatarDefault } from '@/lib/gravatar';
+
+interface AvatarProps {
+  email: string;
+  name?: string | null;
+  size?: number;
+  fallback?: GravatarDefault;
+  className?: string;
+}
+
+export function Avatar({
+  email,
+  name,
+  size = 32,
+  fallback = 'identicon',
+  className = '',
+}: AvatarProps) {
+  return (
+    <img
+      src={getGravatarUrl(email, size * 2, fallback)} // 2x for retina displays
+      alt={name || email}
+      width={size}
+      height={size}
+      className={`rounded-full ${className}`}
+      loading="lazy"
+    />
+  );
+}
+

src/components/ui/index.ts

@@ -1,7 +1,8 @@
+export { Avatar } from './Avatar';
+export { Badge } from './Badge';
 export { Button } from './Button';
 export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from './Card';
 export { Input } from './Input';
-export { Textarea } from './Textarea';
-export { Badge } from './Badge';
 export { Modal, ModalFooter } from './Modal';
+export { Textarea } from './Textarea';