5 changed files with 78 additions and 11 deletions
@ -1,26 +1,50 @@
@@ -1,26 +1,50 @@
|
||||
import classNames from "classnames"; |
||||
|
||||
import { UserIcon } from "@/components/UserIcon"; |
||||
import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart"; |
||||
import { useAuthStore } from "@/stores/auth"; |
||||
|
||||
export interface AvatarProps { |
||||
profile: AccountProfile["profile"]; |
||||
sizeClass?: string; |
||||
iconClass?: string; |
||||
} |
||||
|
||||
export function Avatar(props: AvatarProps) { |
||||
return ( |
||||
<div |
||||
className="h-[2em] w-[2em] rounded-full overflow-hidden flex items-center justify-center text-white" |
||||
className={classNames( |
||||
props.sizeClass, |
||||
"rounded-full overflow-hidden flex items-center justify-center text-white" |
||||
)} |
||||
style={{ |
||||
background: `linear-gradient(to bottom right, ${props.profile.colorA}, ${props.profile.colorB})`, |
||||
}} |
||||
> |
||||
<UserIcon icon={props.profile.icon as any} /> |
||||
<UserIcon className={props.iconClass} icon={props.profile.icon as any} /> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
export function UserAvatar() { |
||||
export function UserAvatar(props: { |
||||
sizeClass?: string; |
||||
iconClass?: string; |
||||
bottom?: React.ReactNode; |
||||
}) { |
||||
const auth = useAuthStore(); |
||||
if (!auth.account) return null; |
||||
return <Avatar profile={auth.account.profile} />; |
||||
return ( |
||||
<div className="relative inline-block"> |
||||
<Avatar |
||||
profile={auth.account.profile} |
||||
sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"} |
||||
iconClass={props.iconClass} |
||||
/> |
||||
{props.bottom ? ( |
||||
<div className="absolute bottom-0 left-1/2 transform translate-y-1/2 -translate-x-1/2"> |
||||
{props.bottom} |
||||
</div> |
||||
) : null} |
||||
</div> |
||||
); |
||||
} |
||||
|
@ -1,9 +1,41 @@
@@ -1,9 +1,41 @@
|
||||
import { UserAvatar } from "@/components/Avatar"; |
||||
import { Button } from "@/components/Button"; |
||||
import { Icon, Icons } from "@/components/Icon"; |
||||
import { SettingsCard } from "@/components/layout/SettingsCard"; |
||||
import { AuthInputBox } from "@/components/text-inputs/AuthInputBox"; |
||||
import { useAuth } from "@/hooks/auth/useAuth"; |
||||
|
||||
export function AccountEditPart() { |
||||
const { logout } = useAuth(); |
||||
|
||||
return ( |
||||
<SettingsCard className="!mt-8"> |
||||
<p>Account editing will go here</p> |
||||
<SettingsCard paddingClass="px-8 py-10" className="!mt-8"> |
||||
<div className="grid lg:grid-cols-[auto,1fr] gap-8"> |
||||
<div> |
||||
<UserAvatar |
||||
iconClass="text-5xl" |
||||
sizeClass="w-32 h-32" |
||||
bottom={ |
||||
<div className="text-xs flex gap-2 items-center bg-editBadge-bg text-editBadge-text hover:bg-editBadge-bgHover py-1 px-3 rounded-full cursor-pointer"> |
||||
<Icon icon={Icons.EDIT} /> |
||||
Edit |
||||
</div> |
||||
} |
||||
/> |
||||
</div> |
||||
<div> |
||||
<div className="space-y-8 max-w-xs"> |
||||
<AuthInputBox label="Account name" placeholder="Muad'Dib" /> |
||||
<AuthInputBox label="Device name" placeholder="Fremen tablet" /> |
||||
<div className="flex space-x-3"> |
||||
<Button theme="purple">Save account</Button> |
||||
<Button theme="danger" onClick={logout}> |
||||
Log out |
||||
</Button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</SettingsCard> |
||||
); |
||||
} |
||||
|
Loading…
Reference in new issue