- added settings page and function

- add Role Ring for avatar and display role for user nav

src/components/avatar/AvatarUser.tsx

@@ -0,0 +1,44 @@
+import { useSession } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import RoleRing from './RoleRing';
+
+interface AvatarUserProps {
+  className?: string;
+  textSize?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+}
+
+const AvatarUser = ({ className, textSize = 'md' }: AvatarUserProps) => {
+  const { data: session } = useSession();
+  const imagePath = session?.user?.image
+    ? `./data/avatar/${session?.user?.image}`
+    : undefined;
+  const shortName = session?.user?.name
+    ?.split(' ')
+    .slice(0, 2)
+    .map((name) => name[0])
+    .join('');
+
+  return (
+    <RoleRing type={session?.user?.role}>
+      <Avatar className={className}>
+        <AvatarImage src={imagePath} />
+        <AvatarFallback
+          className={cn(
+            'bg-orange-400 text-white',
+            textSize === 'sm' && 'text-xs',
+            textSize === 'md' && 'text-sm',
+            textSize === 'lg' && 'text-xl',
+            textSize === 'xl' && 'text-2xl',
+            textSize === '2xl' && 'text-3xl',
+            textSize === '3xl' && 'text-4xl',
+          )}
+        >
+          {shortName}
+        </AvatarFallback>
+      </Avatar>
+    </RoleRing>
+  );
+};
+
+export default AvatarUser;