UserProfile
Premium user profile dropdown with animated transitions, sectioned actions, and status badges.
Modular Build
Interactive Preview
Initialising Operative...
Architecture
Component Architecture
UserProfile/
Prop Usage
| Prop | Type | Default | Description |
|---|---|---|---|
userrequired | { name: string; email?: string; avatar?: string } | — | User data to display in the dropdown. |
isProfileOpenrequired | boolean | — | Controls whether the dropdown is open. |
setIsProfileOpenrequired | (open: boolean) => void | — | Setter for the open state. |
onLogout | () => void | — | Callback fired when user clicks "Log out". |
onSwitchAccount | () => void | — | Callback for the "Switch Account" action. |
Usage
import { UserProfile } from '@/ui';
import { useState } from 'react';
const [open, setOpen] = useState(false);
<UserProfile
user={{ name: 'Jane Doe', email: 'jane@example.com' }}
isProfileOpen={open}
setIsProfileOpen={setOpen}
onLogout={() => supabase.auth.signOut()}
/>