2023-11-18 15:12:31 +01:00
|
|
|
import { UserIcon } from "@/components/UserIcon";
|
2023-11-05 17:56:56 +01:00
|
|
|
import { AccountProfile } from "@/pages/parts/auth/AccountCreatePart";
|
|
|
|
import { useAuthStore } from "@/stores/auth";
|
|
|
|
|
|
|
|
export interface AvatarProps {
|
|
|
|
profile: AccountProfile["profile"];
|
|
|
|
}
|
|
|
|
|
|
|
|
export function Avatar(props: AvatarProps) {
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
className="h-[2em] w-[2em] rounded-full overflow-hidden flex items-center justify-center text-white"
|
|
|
|
style={{
|
|
|
|
background: `linear-gradient(to bottom right, ${props.profile.colorA}, ${props.profile.colorB})`,
|
|
|
|
}}
|
|
|
|
>
|
2023-11-18 15:12:31 +01:00
|
|
|
<UserIcon icon={props.profile.icon as any} />
|
2023-11-05 17:56:56 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export function UserAvatar() {
|
|
|
|
const auth = useAuthStore();
|
|
|
|
if (!auth.account) return null;
|
|
|
|
return <Avatar profile={auth.account.profile} />;
|
|
|
|
}
|