feat: proper redirect handling

web/src/feature/Avatar/index.tsx

@@ -0,0 +1,30 @@
+import { useAuth } from "@/store/auth";
+import { User } from "lucide-react";
+import type { FC } from "react";
+
+export interface AvatarProps {
+  iconSize?: number;
+  className?: string;
+}
+
+const Avatar: FC<AvatarProps> = ({ iconSize = 32, className }) => {
+  const profile = useAuth((state) => state.profile);
+
+  return (
+    <div
+      className={`overflow-hidden bg-gray-100 rounded-full ring ring-gray-400 dark:ring dark:ring-gray-500 flex items-center justify-center ${className}`}
+    >
+      {profile?.profile_picture ? (
+        <img
+          src={profile?.profile_picture?.toString()}
+          className="w-full h-full flex-1 object-cover"
+          alt="profile"
+        />
+      ) : (
+        <User size={iconSize} />
+      )}
+    </div>
+  );
+};
+
+export default Avatar;