59 lines
1.3 KiB
TypeScript
59 lines
1.3 KiB
TypeScript
/**
|
|
* @file Profile avatar Component
|
|
*/
|
|
|
|
import {IonIcon} from "@ionic/react";
|
|
import {helpOutline, helpSharp} from "ionicons/icons";
|
|
import {FC} from "react";
|
|
|
|
import {TextFill} from "~/components/text-fill";
|
|
import {usePersistentStore} from "~/lib/stores/persistent";
|
|
import {Profile, Theme} from "~/lib/types";
|
|
|
|
/**
|
|
* Profile avatar component props
|
|
*/
|
|
interface AvatarProps {
|
|
/**
|
|
* Profile
|
|
*/
|
|
profile: Partial<Pick<Profile, "color" | "emoji">>;
|
|
}
|
|
|
|
/**
|
|
* Profile avatar component
|
|
* @param props Props
|
|
* @returns JSX
|
|
*/
|
|
export const Avatar: FC<AvatarProps> = ({profile}) => {
|
|
// Hooks
|
|
const theme = usePersistentStore(state => state.theme);
|
|
|
|
// Variables
|
|
let color = profile.color;
|
|
|
|
if (color === undefined) {
|
|
color = theme === Theme.DARK ? "#e5e5e5" : "#404040";
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="flex flex-row h-full items-center justify-center rounded-full w-full p-1"
|
|
style={{
|
|
backgroundColor: color,
|
|
boxShadow: `0 0 20px -2px ${color}`,
|
|
}}
|
|
>
|
|
{profile.emoji === undefined ? (
|
|
<IonIcon
|
|
className="dark:text-black h-full text-white w-full"
|
|
ios={helpOutline}
|
|
md={helpSharp}
|
|
/>
|
|
) : (
|
|
<TextFill>{profile.emoji}</TextFill>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|