43 lines
1001 B
TypeScript
43 lines
1001 B
TypeScript
import { LoaderIcon } from "@lume/icons";
|
|
import { cn } from "@lume/utils";
|
|
import { useRouteContext } from "@tanstack/react-router";
|
|
import { Dispatch, ReactNode, SetStateAction, useState } from "react";
|
|
import { toast } from "sonner";
|
|
|
|
export function AvatarUploader({
|
|
setPicture,
|
|
children,
|
|
className,
|
|
}: {
|
|
setPicture: Dispatch<SetStateAction<string>>;
|
|
children: ReactNode;
|
|
className?: string;
|
|
}) {
|
|
const { ark } = useRouteContext({ strict: false });
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const uploadAvatar = async () => {
|
|
// start loading
|
|
setLoading(true);
|
|
try {
|
|
const image = await ark.upload();
|
|
setPicture(image);
|
|
} catch (e) {
|
|
toast.error(String(e));
|
|
}
|
|
|
|
// stop loading
|
|
setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => uploadAvatar()}
|
|
className={cn("size-4", className)}
|
|
>
|
|
{loading ? <LoaderIcon className="size-4 animate-spin" /> : children}
|
|
</button>
|
|
);
|
|
}
|