@djangocfg/layouts 2.1.263 → 2.1.266

package/README.md

@@ -124,10 +124,49 @@ import { AppLayout } from '@djangocfg/layouts';
 | **PrivateLayout** | App shell — sidebar + header |
 | **AuthLayout** | Sign-in flows |
 | **AdminLayout** | Admin console |
-| **ProfileLayout** | Profile + 2FA |
+| **ProfileLayout** | Profile page with avatar, editable fields, 2FA, and slot/tab system |
 
 **Brand:** `ThemeBrandMark` / **`ThemeBrandMarkImg`** for logo slots.
 
+### ProfileLayout — slots & tabs
+
+```tsx
+import { ProfileLayout } from '@djangocfg/layouts';
+import type { ProfileTab, ProfileSlots } from '@djangocfg/layouts';
+
+const tabs: ProfileTab[] = [
+  {
+    value: 'billing',
+    label: 'Billing',
+    content: <BillingSection />,
+  },
+];
+
+const slots: ProfileSlots = {
+  headerBadge:     <Badge>Pro</Badge>,           // next to user name
+  headerMenuItems: <DropdownMenuItem>…</DropdownMenuItem>, // in ⋯ menu
+  headerAfter:     <OnboardingBanner />,          // below avatar, above tabs
+  footer:          <LinkedAccounts />,            // below all tab content
+};
+
+<ProfileLayout
+  enable2FA
+  enableDeleteAccount
+  tabs={tabs}
+  slots={slots}
+/>
+```
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `enable2FA` | `boolean` | Show Security tab with 2FA management |
+| `enableDeleteAccount` | `boolean` | Show Delete account in `⋯` menu |
+| `tabs` | `ProfileTab[]` | Extra tabs appended after built-in ones |
+| `slots.headerBadge` | `ReactNode` | Rendered next to the user name (plan, role…) |
+| `slots.headerMenuItems` | `ReactNode` | Extra `DropdownMenuItem`s in the `⋯` menu |
+| `slots.headerAfter` | `ReactNode` | Below avatar row, above tabs |
+| `slots.footer` | `ReactNode` | Below all tab content |
+
 ---
 
 ## i18n on AppLayout

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/layouts",
-  "version": "2.1.263",
+  "version": "2.1.266",
   "description": "Simple, straightforward layout components for Next.js - import and use with props",
   "keywords": [
     "layouts",
@@ -74,14 +74,14 @@
     "check": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.263",
-    "@djangocfg/centrifugo": "^2.1.263",
-    "@djangocfg/i18n": "^2.1.263",
-    "@djangocfg/monitor": "^2.1.263",
-    "@djangocfg/debuger": "^2.1.263",
-    "@djangocfg/ui-core": "^2.1.263",
-    "@djangocfg/ui-nextjs": "^2.1.263",
-    "@djangocfg/ui-tools": "^2.1.263",
+    "@djangocfg/api": "^2.1.266",
+    "@djangocfg/centrifugo": "^2.1.266",
+    "@djangocfg/i18n": "^2.1.266",
+    "@djangocfg/monitor": "^2.1.266",
+    "@djangocfg/debuger": "^2.1.266",
+    "@djangocfg/ui-core": "^2.1.266",
+    "@djangocfg/ui-nextjs": "^2.1.266",
+    "@djangocfg/ui-tools": "^2.1.266",
     "@hookform/resolvers": "^5.2.2",
     "consola": "^3.4.2",
     "lucide-react": "^0.545.0",
@@ -103,21 +103,22 @@
     }
   },
   "dependencies": {
+    "libphonenumber-js": "^1.12.24",
     "nextjs-toploader": "^3.9.17",
     "qrcode.react": "^4.2.0",
     "react-ga4": "^2.1.0",
     "uuid": "^11.1.0"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.263",
-    "@djangocfg/i18n": "^2.1.263",
-    "@djangocfg/centrifugo": "^2.1.263",
-    "@djangocfg/monitor": "^2.1.263",
-    "@djangocfg/debuger": "^2.1.263",
-    "@djangocfg/typescript-config": "^2.1.263",
-    "@djangocfg/ui-core": "^2.1.263",
-    "@djangocfg/ui-nextjs": "^2.1.263",
-    "@djangocfg/ui-tools": "^2.1.263",
+    "@djangocfg/api": "^2.1.266",
+    "@djangocfg/i18n": "^2.1.266",
+    "@djangocfg/centrifugo": "^2.1.266",
+    "@djangocfg/monitor": "^2.1.266",
+    "@djangocfg/debuger": "^2.1.266",
+    "@djangocfg/typescript-config": "^2.1.266",
+    "@djangocfg/ui-core": "^2.1.266",
+    "@djangocfg/ui-nextjs": "^2.1.266",
+    "@djangocfg/ui-tools": "^2.1.266",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/layouts/AuthLayout/components/steps/SetupStep/index.tsx

@@ -15,12 +15,8 @@ export interface SetupStepProps {
 }
 
 /**
- * SetupStep - Orchestrator for 2FA setup flow
- *
- * Delegates rendering to focused sub-components:
- * - SetupLoading: Initial loading state
- * - SetupQRCode: QR code scanning
- * - SetupComplete: Backup codes display
+ * SetupStep - Orchestrator for 2FA setup flow (requires AuthFormContext).
+ * For use outside AuthLayout use SetupStepStandalone.
  */
 export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
   const { setStep } = useAuthFormContext();
@@ -89,3 +85,51 @@ export const SetupStep: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
   // Fallback to loading
   return <SetupLoading />;
 };
+
+/**
+ * SetupStepStandalone — same flow as SetupStep but without AuthFormContext.
+ * Use this inside ProfileLayout or any page outside AuthLayout.
+ */
+export const SetupStepStandalone: React.FC<SetupStepProps> = ({ onComplete, onSkip }) => {
+  const {
+    isLoading,
+    error,
+    setupData,
+    backupCodes,
+    backupCodesWarning,
+    setupStep,
+    startSetup,
+    confirmSetup,
+  } = useTwoFactorSetup({ onComplete, onError: () => {} });
+
+  React.useEffect(() => {
+    if (setupStep === 'idle') startSetup();
+  }, [setupStep, startSetup]);
+
+  if (isLoading && !setupData) return <SetupLoading />;
+
+  if (setupStep === 'complete' && backupCodes) {
+    return (
+      <SetupComplete
+        backupCodes={backupCodes}
+        backupCodesWarning={backupCodesWarning}
+        onDone={() => onComplete?.()}
+      />
+    );
+  }
+
+  if (setupData) {
+    return (
+      <SetupQRCode
+        provisioningUri={setupData.provisioningUri}
+        secret={setupData.secret}
+        isLoading={isLoading}
+        error={error}
+        onConfirm={confirmSetup}
+        onSkip={onSkip}
+      />
+    );
+  }
+
+  return <SetupLoading />;
+};

package/src/layouts/ProfileLayout/ProfileLayout.tsx

@@ -1,26 +1,27 @@
 'use client';
 
-import { Camera, LogOut } from 'lucide-react';
+import { LogOut, MoreHorizontal, Trash2 } from 'lucide-react';
 import moment from 'moment';
-import React, { useEffect, useMemo, useState } from 'react';
-
-import { useAppT } from '@djangocfg/i18n';
-import { toast } from '@djangocfg/ui-core/hooks';
+import React, { useEffect } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
 import {
-  Avatar,
-  AvatarFallback,
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
   Preloader,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
 } from '@djangocfg/ui-core/components';
-import { cn } from '@djangocfg/ui-core/lib';
 
-import { profileLogger } from '../../utils/logger';
-import { useLogout } from '../../hooks';
 import {
-  ActionButton,
+  AvatarSection,
   DeleteAccountScreen,
-  DeleteAccountSection,
   EditableField,
   Section,
   TwoFactorSection,
@@ -28,100 +29,172 @@ import {
 import { ProfileProvider, useProfileContext } from './context';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Types
+// Slot + Tab types (public API)
 // ─────────────────────────────────────────────────────────────────────────────
 
-interface ProfileLayoutProps {
+export interface ProfileTab {
+  /** Unique key, used as Tabs value */
+  value: string;
+  /** Trigger label */
+  label: React.ReactNode;
+  /** Tab panel content */
+  content: React.ReactNode;
+}
+
+export interface ProfileSlots {
+  /** Extra items rendered inside the ⋯ dropdown, above the separator before Delete */
+  headerMenuItems?: React.ReactNode;
+  /** Rendered next to the user name (e.g. plan badge, role chip) */
+  headerBadge?: React.ReactNode;
+  /** Rendered below the avatar row, above the tabs */
+  headerAfter?: React.ReactNode;
+  /** Rendered below all tab content */
+  footer?: React.ReactNode;
+}
+
+export interface ProfileLayoutProps {
   onUnauthenticated?: () => void;
   title?: string;
   enable2FA?: boolean;
   enableDeleteAccount?: boolean;
+  /** Extra tabs appended after built-in Profile / Security tabs */
+  tabs?: ProfileTab[];
+  /** Named slots for additional content */
+  slots?: ProfileSlots;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Header
+// ─────────────────────────────────────────────────────────────────────────────
+
+function ProfileHeader({ slots, enableDeleteAccount }: {
+  slots?: ProfileSlots;
+  enableDeleteAccount?: boolean;
+}) {
+  const { labels, onLogout, setStep } = useProfileContext();
+  const { user } = useAuth();
+
+  if (!user) return null;
+
+  const displayName = user.full_name || user.display_username || user.email;
+  const memberSince = user.date_joined
+    ? moment.utc(user.date_joined).local().format('MMMM YYYY')
+    : null;
+
+  const badge = slots?.headerBadge ?? null;
+  const menuItems = slots?.headerMenuItems ?? null;
+  const headerAfter = slots?.headerAfter ?? null;
+
+  return (
+    <div className="pb-4 md:pb-6 border-b mb-2">
+      <div className="flex items-center gap-3 md:gap-4">
+        <AvatarSection />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 flex-wrap">
+            <h1 className="text-lg md:text-xl font-semibold truncate">{displayName}</h1>
+            {badge}
+          </div>
+          <p className="text-sm text-muted-foreground truncate">{user.email}</p>
+          {memberSince && (
+            <p className="text-xs text-muted-foreground/60 mt-0.5">
+              Member since {memberSince}
+            </p>
+          )}
+        </div>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="icon" className="flex-shrink-0 rounded-full">
+              <MoreHorizontal className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuItem onClick={onLogout} className="gap-2">
+              <LogOut className="w-4 h-4" />
+              {labels.signOut}
+            </DropdownMenuItem>
+
+            {menuItems && <><DropdownMenuSeparator />{menuItems}</>}
+
+            {enableDeleteAccount && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => setStep('delete-account')}
+                  className="gap-2 text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="w-4 h-4" />
+                  {labels.deleteAccount}
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {headerAfter && <div className="mt-4">{headerAfter}</div>}
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Built-in tab: Profile
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TabProfile() {
+  const { labels, onFieldSave } = useProfileContext();
+  const { user } = useAuth();
+  if (!user) return null;
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-3 md:gap-6 pt-4">
+      <Section title={labels.personalInfo}>
+        <EditableField label={labels.firstName} value={user.first_name || ''} placeholder={labels.addFirstName} onSave={(v) => onFieldSave('first_name', v)} />
+        <EditableField label={labels.lastName} value={user.last_name || ''} placeholder={labels.addLastName} onSave={(v) => onFieldSave('last_name', v)} />
+        <EditableField label={labels.phone} value={user.phone || ''} placeholder={labels.addPhone} onSave={(v) => onFieldSave('phone', v)} type="phone" />
+      </Section>
+
+      <Section title={labels.work}>
+        <EditableField label={labels.company} value={user.company || ''} placeholder={labels.addCompany} onSave={(v) => onFieldSave('company', v)} />
+        <EditableField label={labels.position} value={user.position || ''} placeholder={labels.addPosition} onSave={(v) => onFieldSave('position', v)} />
+      </Section>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Built-in tab: Security
+// ─────────────────────────────────────────────────────────────────────────────
+
+function TabSecurity() {
+  return (
+    <div className="pt-4 space-y-4">
+      <TwoFactorSection />
+    </div>
+  );
 }
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Profile Content
+// Main content
 // ─────────────────────────────────────────────────────────────────────────────
 
-const ProfileContent = ({
+function ProfileContent({
   onUnauthenticated,
-  title,
-  enable2FA = false,
+  enable2FA,
   enableDeleteAccount = true,
-}: ProfileLayoutProps) => {
-  const { user, isLoading, uploadAvatar, updateProfile } = useAuth();
-  const [isUploading, setIsUploading] = useState(false);
-  const t = useAppT();
-
-  const labels = useMemo(() => ({
-    title: title || t('layouts.profilePage.title'),
-    personalInfo: t('layouts.profilePage.personalInfo'),
-    work: t('layouts.profilePage.work'),
-    security: t('layouts.profilePage.security'),
-    firstName: t('layouts.profilePage.firstName'),
-    lastName: t('layouts.profilePage.lastName'),
-    email: t('layouts.profilePage.email'),
-    phone: t('layouts.profilePage.phone'),
-    company: t('layouts.profilePage.company'),
-    position: t('layouts.profilePage.position'),
-    notSet: t('layouts.profilePage.notSet'),
-    addFirstName: t('layouts.profilePage.addFirstName') || 'Add first name',
-    addLastName: t('layouts.profilePage.addLastName') || 'Add last name',
-    addPhone: t('layouts.profilePage.addPhone') || 'Add phone number',
-    addCompany: t('layouts.profilePage.addCompany') || 'Add company',
-    addPosition: t('layouts.profilePage.addPosition') || 'Add position',
-    signOut: t('layouts.profilePage.signOut'),
-    changeAvatar: t('layouts.profilePage.changeAvatar'),
-    memberSince: t('layouts.profilePage.memberSince'),
-    profileUpdated: t('layouts.profilePage.profileUpdated'),
-    avatarUpdated: t('layouts.profilePage.avatarUpdated'),
-    failedToUpdate: t('layouts.profilePage.failedToUpdate'),
-    failedToUploadAvatar: t('layouts.profilePage.failedToUploadAvatar'),
-    selectImageFile: t('layouts.profilePage.selectImageFile'),
-    fileTooLarge: t('layouts.profilePage.fileTooLarge'),
-    notAuthenticated: t('layouts.profilePage.notAuthenticated'),
-    pleaseLogIn: t('layouts.profilePage.pleaseLogIn'),
-    loading: t('ui.states.loading'),
-  }), [t, title]);
+  tabs = [],
+  slots,
+}: ProfileLayoutProps) {
+  const { labels } = useProfileContext();
+  const { user, isLoading } = useAuth();
 
   useEffect(() => {
     if (onUnauthenticated && !user && !isLoading) onUnauthenticated();
   }, [onUnauthenticated, user, isLoading]);
 
-  const handleAvatarChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (!file) return;
-    if (!file.type.startsWith('image/')) { toast.error(labels.selectImageFile); return; }
-    if (file.size > 5 * 1024 * 1024) { toast.error(labels.fileTooLarge); return; }
-
-    setIsUploading(true);
-    try {
-      await uploadAvatar(file);
-      toast.success(labels.avatarUpdated);
-    } catch (error) {
-      toast.error(labels.failedToUploadAvatar);
-      profileLogger.error('Avatar upload error:', error);
-    } finally {
-      setIsUploading(false);
-    }
-  };
-
-  const handleFieldSave = async (field: string, value: string) => {
-    try {
-      await updateProfile({ [field]: value });
-      toast.success(labels.profileUpdated);
-    } catch (error: any) {
-      profileLogger.error('Profile update error:', error);
-      toast.error(error?.response?.data?.[field]?.[0] || labels.failedToUpdate);
-      throw error;
-    }
-  };
-
-  const handleLogout = useLogout();
-
   if (isLoading) {
-    return (
-      <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />
-    );
+    return <Preloader variant="fullscreen" text={labels.loading} size="lg" backdrop backdropOpacity={80} />;
   }
 
   if (!user) {
@@ -135,131 +208,66 @@ const ProfileContent = ({
     );
   }
 
-  const getInitials = (name: string) =>
-    name ? name.split(' ').map((w) => w[0]).join('').toUpperCase().slice(0, 2) : 'U';
+  // ── Prepare data before render ──────────────────────────────────────────────
 
-  const displayName = user.full_name || user.display_username || user.email;
-  const memberSinceText = useMemo(
-    () => user.date_joined
-      ? labels.memberSince.replace('{date}', moment.utc(user.date_joined).local().format('MMMM YYYY'))
-      : null,
-    [user.date_joined, labels.memberSince]
-  );
+  const extraTriggers = tabs.map((tab) => (
+    <TabsTrigger key={tab.value} value={tab.value}>
+      {tab.label}
+    </TabsTrigger>
+  ));
 
-  return (
-    <div className="container mx-auto px-4 py-12 max-w-md">
-      {/* Avatar + header */}
-      <div className="flex flex-col items-center mb-12">
-        <div className="relative group mb-4">
-          <Avatar className="w-28 h-28 text-3xl">
-            {user.avatar ? (
-              <img src={user.avatar} alt="" className="w-full h-full object-cover" />
-            ) : (
-              <AvatarFallback className="bg-muted text-muted-foreground text-2xl font-medium">
-                {getInitials(user.display_username || user.email || '')}
-              </AvatarFallback>
-            )}
-          </Avatar>
-          <label
-            className={cn(
-              'absolute inset-0 rounded-full flex items-center justify-center cursor-pointer',
-              'bg-black/0 group-hover:bg-black/40 transition-colors'
-            )}
-            title={labels.changeAvatar}
-          >
-            <div className="opacity-0 group-hover:opacity-100 transition-opacity">
-              {isUploading ? (
-                <div className="w-6 h-6 border-2 border-white border-t-transparent rounded-full animate-spin" />
-              ) : (
-                <Camera className="w-6 h-6 text-white" />
-              )}
-            </div>
-            <input
-              type="file"
-              accept="image/*"
-              onChange={handleAvatarChange}
-              className="hidden"
-              disabled={isUploading}
-            />
-          </label>
-        </div>
+  const extraPanels = tabs.map((tab) => (
+    <TabsContent key={tab.value} value={tab.value}>
+      {tab.content}
+    </TabsContent>
+  ));
 
-        <h1 className="text-2xl font-semibold tracking-tight">{displayName}</h1>
-        <p className="text-[15px] text-muted-foreground mt-1">{user.email}</p>
-        {memberSinceText && (
-          <p className="text-[13px] text-muted-foreground/60 mt-2">{memberSinceText}</p>
-        )}
-      </div>
+  const footer = slots?.footer ?? null;
 
-      {/* Personal Info */}
-      <Section title={labels.personalInfo}>
-        <EditableField
-          label={labels.firstName}
-          value={user.first_name || ''}
-          placeholder={labels.addFirstName}
-          onSave={(v) => handleFieldSave('first_name', v)}
-        />
-        <EditableField
-          label={labels.lastName}
-          value={user.last_name || ''}
-          placeholder={labels.addLastName}
-          onSave={(v) => handleFieldSave('last_name', v)}
-        />
-        <EditableField
-          label={labels.phone}
-          value={user.phone || ''}
-          placeholder={labels.addPhone}
-          onSave={(v) => handleFieldSave('phone', v)}
-          type="phone"
-        />
-      </Section>
+  // ── Render ──────────────────────────────────────────────────────────────────
 
-      {/* Work */}
-      <Section title={labels.work}>
-        <EditableField
-          label={labels.company}
-          value={user.company || ''}
-          placeholder={labels.addCompany}
-          onSave={(v) => handleFieldSave('company', v)}
-        />
-        <EditableField
-          label={labels.position}
-          value={user.position || ''}
-          placeholder={labels.addPosition}
-          onSave={(v) => handleFieldSave('position', v)}
-        />
-      </Section>
+  return (
+    <div className="container mx-auto px-4 py-6 md:py-10 max-w-3xl">
+      <ProfileHeader slots={slots} enableDeleteAccount={enableDeleteAccount} />
 
-      {/* Security */}
-      {enable2FA && <TwoFactorSection />}
+      <Tabs defaultValue="profile" className="mt-2">
+        {/* Underline-style scrollable tabs — mobile friendly */}
+        <TabsList variant="underline" scrollable>
+          <TabsTrigger value="profile">{labels.personalInfo}</TabsTrigger>
+          {enable2FA && <TabsTrigger value="security">{labels.security}</TabsTrigger>}
+          {extraTriggers}
+        </TabsList>
 
-      {/* Actions */}
-      <Section>
-        <ActionButton
-          icon={<LogOut className="w-4 h-4" />}
-          label={labels.signOut}
-          onClick={handleLogout}
-        />
-      </Section>
+        <TabsContent value="profile">
+          <TabProfile />
+        </TabsContent>
+
+        {enable2FA && (
+          <TabsContent value="security">
+            <TabSecurity />
+          </TabsContent>
+        )}
 
-      {enableDeleteAccount && <DeleteAccountSection />}
+        {extraPanels}
+      </Tabs>
+
+      {footer && <div className="mt-8">{footer}</div>}
     </div>
   );
-};
+}
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Export
+// Router + Export
 // ─────────────────────────────────────────────────────────────────────────────
 
-const ProfileRouter: React.FC<ProfileLayoutProps> = (props) => {
+function ProfileRouter(props: ProfileLayoutProps) {
   const { step } = useProfileContext();
-
   if (step === 'delete-account') return <DeleteAccountScreen />;
   return <ProfileContent {...props} />;
-};
+}
 
-export const ProfileLayout: React.FC<ProfileLayoutProps> = (props) => (
-  <ProfileProvider>
-    <ProfileRouter {...props} />
+export const ProfileLayout: React.FC<ProfileLayoutProps> = ({ title, ...props }) => (
+  <ProfileProvider title={title}>
+    <ProfileRouter title={title} {...props} />
   </ProfileProvider>
 );

package/src/layouts/ProfileLayout/components/AvatarSection.tsx

@@ -72,11 +72,10 @@ export const AvatarSection = () => {
   };
 
   return (
-    <div className="flex flex-col items-center mb-4">
+    <div className="flex flex-col items-center flex-shrink-0">
       <div className="relative group">
         <Avatar
-          className="aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
-          style={{ width: '80px', height: '80px' }}
+          className="w-14 h-14 md:w-20 md:h-20 aspect-square rounded-full overflow-hidden ring-1 ring-foreground/20 transition-transform group-hover:scale-105"
         >
           {avatarPreview ? (
             <img