add edit profile

src/shared/mediaUploader.tsx

@@ -1,5 +1,5 @@
-import { MediaIcon } from "@shared/icons";
-import { Tooltip } from "@shared/tooltip";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import { LoaderIcon, MediaIcon } from "@shared/icons";
 import { open } from "@tauri-apps/api/dialog";
 import { Body, fetch } from "@tauri-apps/api/http";
 import { createBlobFromFile } from "@utils/createBlobFromFile";
@@ -56,42 +56,35 @@ export function MediaUploader({ setState }: { setState: any }) {
 	};
 
 	return (
-		<Tooltip message="Upload media">
-			<button
-				type="button"
-				onClick={() => openFileDialog()}
-				className="group inline-flex h-6 w-6 items-center justify-center rounded bg-zinc-700 hover:bg-zinc-600"
-			>
-				{loading ? (
-					<svg
-						className="h-4 w-4 animate-spin text-black dark:text-zinc-100"
-						xmlns="http://www.w3.org/2000/svg"
-						fill="none"
-						viewBox="0 0 24 24"
+		<Tooltip.Provider>
+			<Tooltip.Root delayDuration={150}>
+				<Tooltip.Trigger asChild>
+					<button
+						type="button"
+						onClick={() => openFileDialog()}
+						className="group inline-flex h-6 w-6 items-center justify-center rounded bg-zinc-700 hover:bg-zinc-600"
 					>
-						<title id="loading">Loading</title>
-						<circle
-							className="opacity-25"
-							cx="12"
-							cy="12"
-							r="10"
-							stroke="currentColor"
-							strokeWidth="4"
-						/>
-						<path
-							className="opacity-75"
-							fill="currentColor"
-							d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-						/>
-					</svg>
-				) : (
-					<MediaIcon
-						width={14}
-						height={14}
-						className="text-zinc-400 group-hover:text-zinc-200"
-					/>
-				)}
-			</button>
-		</Tooltip>
+						{loading ? (
+							<LoaderIcon className="h-4 w-4 animate-spin text-black dark:text-zinc-100" />
+						) : (
+							<MediaIcon
+								width={14}
+								height={14}
+								className="text-zinc-400 group-hover:text-zinc-200"
+							/>
+						)}
+					</button>
+				</Tooltip.Trigger>
+				<Tooltip.Portal>
+					<Tooltip.Content
+						className="-left-10 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade select-none text-sm rounded-md text-zinc-100 bg-zinc-800/80 backdrop-blur-lg px-3.5 py-1.5 leading-none will-change-[transform,opacity]"
+						sideOffset={5}
+					>
+						Upload media
+						<Tooltip.Arrow className="fill-zinc-800/80 backdrop-blur-lg" />
+					</Tooltip.Content>
+				</Tooltip.Portal>
+			</Tooltip.Root>
+		</Tooltip.Provider>
 	);
 }