Enhance UserButton component to format email display

- Introduced useMemo to format the user's email into local part and domain for better readability.
- Updated the rendering logic to conditionally display the formatted email or a fallback message when no email is available.

Author: SebasianDev

components/login/user-button/UserButton.tsx

@@ -11,13 +11,27 @@ import { signOut, useSession } from 'next-auth/react';
 import Image from 'next/image';
 import Link from 'next/link';
 import SignOutComponent from '../sign-out/SignOut';
-import { useState } from 'react';
+import { useState, useMemo } from 'react';
 import { CircleUserRound } from 'lucide-react';
 import { Separator } from '@radix-ui/react-dropdown-menu';
 export function UserButton() {
   const { data: session, status } = useSession() ?? {};
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const isAuthenticated = status === 'authenticated';
+  
+  // Dividir el correo por @ para evitar cortes no deseados
+  const formattedEmail = useMemo(() => {
+    const email = session?.user?.email;
+    if (!email) return null;
+    
+    const atIndex = email.indexOf('@');
+    if (atIndex === -1) return { localPart: email, domain: null };
+    
+    return {
+      localPart: email.substring(0, atIndex),
+      domain: email.substring(atIndex), // Incluye el @
+    };
+  }, [session?.user?.email]);
   const handleSignOut = (): void => {
     // Clean up any stored redirect URLs before logout
     if (typeof window !== "undefined") {
@@ -66,9 +80,18 @@ export function UserButton() {
             shadow-lg p-1 rounded-md w-48'
             >
               <div className="px-2 py-1.5">
-                <p className="text-sm break-words">
-                  {session.user.email || 'No email available'}
-                </p>
+                {formattedEmail ? (
+                  <div className="text-sm">
+                    <div className="break-words">{formattedEmail.localPart}</div>
+                    {formattedEmail.domain && (
+                      <div className="break-words">{formattedEmail.domain}</div>
+                    )}
+                  </div>
+                ) : (
+                  <p className="text-sm break-words">
+                    {session.user.email || 'No email available'}
+                  </p>
+                )}
 
                 <p className="text-sm break-words mt-1">
                   {session.user.name || 'No name available'}