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:
parent
9c8c54799f
commit
cb4af81cf3
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user