dont use image for unknown player

src/app/search/page.tsx

@@ -1,6 +1,6 @@
-import Avatar from "@/components/Avatar";
 import Card from "@/components/Card";
 import Container from "@/components/Container";
+import UnknownAvatar from "@/components/UnknownAvatar";
 
 import SearchPlayer from "@/components/player/SearchPlayer";
 import { Metadata } from "next";
@@ -17,11 +17,7 @@ export default function Home() {
           className="mt-2 w-full rounded-md bg-gray-800"
           innerClassName="flex flex-col items-center justify-center"
         >
-          <Avatar
+          <UnknownAvatar />
-            className="m-6"
-            label="Player Avatar"
-            url="https://cdn.fascinated.cc/yb4fgdc1.jpg"
-          />
 
           <p className="text-xl">Stranger</p>
           <p className="text mt-2">Find a player profile</p>

src/components/UnknownAvatar.tsx

@@ -0,0 +1,13 @@
+type UnknownAvatarProps = {
+  size?: number;
+};
+
+export default function UnknownAvatar({ size = 150 }: UnknownAvatarProps) {
+  return (
+    <div
+      className={`mb-4 mt-2 flex h-[${size}px] w-[${size}px] items-center justify-center rounded-full bg-gray-600`}
+    >
+      <p className="text-9xl">?</p>
+    </div>
+  );
+}