32 lines
862 B
TypeScript
32 lines
862 B
TypeScript
|
import { useEffect } from "preact/hooks";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const CHARACTER_IDLE_SRC = "/character-idle.gif";
|
||
|
|
const CHARACTER_BUSY_SRC = "/character-busy.gif";
|
||
|
|
|
||
|
|
type SybilCharacterProps = {
|
||
|
|
className?: string;
|
||
|
|
isBusy?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function SybilCharacter({ className, isBusy = false }: SybilCharacterProps) {
|
||
|
|
useEffect(() => {
|
||
|
|
const busyImage = new Image();
|
||
|
|
busyImage.src = CHARACTER_BUSY_SRC;
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
aria-hidden="true"
|
||
|
|
alt=""
|
||
|
|
className={cn(
|
||
|
|
"aspect-square rounded-xl border border-violet-200/24 bg-white/6 object-cover p-1 shadow-[inset_0_1px_0_hsl(252_90%_86%/0.12),0_10px_24px_hsl(240_80%_2%/0.3)]",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
data-state={isBusy ? "busy" : "idle"}
|
||
|
|
draggable={false}
|
||
|
|
src={isBusy ? CHARACTER_BUSY_SRC : CHARACTER_IDLE_SRC}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|