feat: add create account flow

apps/desktop2/src/components/avatarUploader.tsx

@@ -1,17 +1,19 @@
 import { useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
-import { Dispatch, SetStateAction, useState } from "react";
-import { useTranslation } from "react-i18next";
+import { cn } from "@lume/utils";
+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 = useArk();
-
-  const [t] = useTranslation();
   const [loading, setLoading] = useState(false);
 
   const uploadAvatar = async () => {
@@ -32,15 +34,9 @@ export function AvatarUploader({
     <button
       type="button"
       onClick={() => uploadAvatar()}
-      className="inline-flex w-32 items-center justify-center rounded-lg border border-blue-200 bg-blue-100 px-2 py-1.5 text-sm font-medium text-blue-500 hover:border-blue-300 hover:bg-blue-200 dark:border-blue-800 dark:bg-blue-900 dark:text-blue-500 dark:hover:border-blue-800 dark:hover:bg-blue-800"
+      className={cn("", className)}
     >
-      {loading ? (
-        <button type="button" className="size-4" disabled>
-          <LoaderIcon className="size-4 animate-spin" />
-        </button>
-      ) : (
-        t("user.avatarButton")
-      )}
+      {loading ? <LoaderIcon className="size-4 animate-spin" /> : children}
     </button>
   );
 }