From 5b7ccf0b671e2999b62befc729a3e517a0433728 Mon Sep 17 00:00:00 2001
From: Bertrand Yuan <bert.yuan@outlook.com>
Date: Mon, 15 Dec 2025 23:48:10 +0800
Subject: initial commit -- the front-end prototype

The initial code is base on Anirudh's work.

More to see at:

    https://github.com/techwithanirudh/shadcn-blog

Therefore, the code in this commit is under MIT license.
---
 src/components/auth/user-avatar.tsx | 56 +++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/auth/user-avatar.tsx

(limited to 'src/components/auth/user-avatar.tsx')

diff --git a/src/components/auth/user-avatar.tsx b/src/components/auth/user-avatar.tsx
new file mode 100644
index 0000000..53b20b5
--- /dev/null
+++ b/src/components/auth/user-avatar.tsx
@@ -0,0 +1,56 @@
+import type { ComponentProps } from 'react';
+
+import { Icons } from '@/components/icons/icons';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import type { User } from '@/lib/auth-client';
+import { cn } from '@/lib/utils';
+
+export interface UserAvatarClassNames {
+  base?: string;
+  image?: string;
+  fallback?: string;
+  fallbackIcon?: string;
+}
+
+export interface UserAvatarProps {
+  user?: User | null;
+  classNames?: UserAvatarClassNames;
+}
+
+export function UserAvatar({
+  user,
+  classNames,
+  className,
+  ...props
+}: UserAvatarProps & ComponentProps<typeof Avatar>) {
+  const name = user?.name || user?.email;
+  const src = user?.image;
+
+  return (
+    <Avatar
+      key={src}
+      className={cn('rounded-md', className, classNames?.base)}
+      {...props}
+    >
+      <AvatarImage
+        alt={name ?? 'Avatar'}
+        className={cn('rounded-md', classNames?.image)}
+        src={src ?? undefined}
+      />
+
+      <AvatarFallback
+        className={cn(
+          'rounded-md bg-transparent uppercase',
+          classNames?.fallback,
+        )}
+        delayMs={src ? 200 : 0}
+      >
+        {firstTwoCharacters(name) ?? (
+          <Icons.user className={cn('w-[55%]', classNames?.fallbackIcon)} />
+        )}
+      </AvatarFallback>
+    </Avatar>
+  );
+}
+
+const firstTwoCharacters = (name?: string | null) => name?.slice(0, 2);
-- 
cgit v1.2.3