refactor: streamline user avatar handling across components

- Updated the `UserAvatar` component to require a non-optional `image` prop, enhancing type safety.
- Simplified the usage of `UserAvatar` in `SidebarUser` and `UserButton` components by removing unnecessary nullish coalescing.
- Improved code clarity and consistency in user-related components by ensuring direct access to user properties.
This commit is contained in:
javayhu 2025-03-19 09:46:13 +08:00
parent 9c8c54799f
commit cb4af81cf3
4 changed files with 22 additions and 24 deletions

View File

@ -93,8 +93,8 @@ export function SidebarUser() {
data-[state=open]:text-sidebar-accent-foreground"
>
<UserAvatar
name={user.name || undefined}
image={user.image || undefined}
name={user.name}
image={user.image}
className="size-8 border"
/>
@ -118,8 +118,8 @@ export function SidebarUser() {
<DropdownMenuLabel className="p-0 font-normal">
<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
<UserAvatar
name={user.name || undefined}
image={user.image || undefined}
name={user.name}
image={user.image}
className="size-8 border"
/>
<div className="grid flex-1 text-left text-sm leading-tight">

View File

@ -62,8 +62,8 @@ export function UserButton({ user }: UserButtonProps) {
<Drawer open={open} onClose={closeDrawer}>
<DrawerTrigger onClick={() => setOpen(true)}>
<UserAvatar
name={user?.name || undefined}
image={user?.image || undefined}
name={user.name}
image={user.image}
className="size-8 border"
/>
</DrawerTrigger>
@ -78,19 +78,17 @@ export function UserButton({ user }: UserButtonProps) {
</DrawerHeader>
<div className="flex items-center justify-start gap-4 p-2">
<UserAvatar
name={user?.name || undefined}
image={user?.image || undefined}
name={user.name}
image={user.image}
className="size-8 border"
/>
<div className="flex flex-col">
{user?.name && <p className="font-medium">
<p className="font-medium">
{user.name}
</p>}
{user?.email && (
<p className="w-[200px] truncate text-muted-foreground">
{user?.email}
</p>
)}
</p>
<p className="w-[200px] truncate text-muted-foreground">
{user.email}
</p>
</div>
</div>
@ -142,7 +140,7 @@ export function UserButton({ user }: UserButtonProps) {
<DropdownMenuTrigger>
<UserAvatar
name={user.name}
image={user.image || undefined}
image={user.image}
className="size-8 border"
/>
</DropdownMenuTrigger>

View File

@ -4,7 +4,7 @@ import { User2Icon } from 'lucide-react';
interface UserAvatarProps extends AvatarProps {
name: string;
image?: string;
image: string | null | undefined;
}
/**
@ -21,7 +21,7 @@ export function UserAvatar({ name, image, ...props }: UserAvatarProps) {
<AvatarImage
alt={name}
title={name}
src={image}
src={image ?? undefined}
/>
<AvatarFallback>
<span className="sr-only">{name}</span>

View File

@ -1,19 +1,19 @@
import { ResendNewsletterProvider } from './provider/resend';
import {
CheckSubscribeStatusProps,
NewsletterConfig,
NewsletterProvider,
SubscribeNewsletterP,
UnsubscribeNewsletterProps
SubscribeNewsletterParams,
UnsubscribeNewsletterParams,
CheckSubscribeStatusParams
} from './types';
// Re-export types for convenience
export type {
NewsletterProvider,
NewsletterConfig,
SubscribeNewsletterP as SubscribeNewsletterProps,
UnsubscribeNewsletterProps,
CheckSubscribeStatusProps
SubscribeNewsletterParams,
UnsubscribeNewsletterParams,
CheckSubscribeStatusParams
};
// Export provider implementation