From 09f5842a3d79a7073950649065625fdea3aaf8be Mon Sep 17 00:00:00 2001
From: Liam <liam@fascinated.cc>
Date: Fri, 27 Oct 2023 22:56:27 +0100
Subject: [PATCH] dont use image for unknown player

---
 src/app/search/page.tsx          |  8 ++------
 src/components/UnknownAvatar.tsx | 13 +++++++++++++
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 src/components/UnknownAvatar.tsx

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 17f32c6..2441330 100644
--- a/src/app/search/page.tsx
+++ b/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
-            className="m-6"
-            label="Player Avatar"
-            url="https://cdn.fascinated.cc/yb4fgdc1.jpg"
-          />
+          <UnknownAvatar />
 
           <p className="text-xl">Stranger</p>
           <p className="text mt-2">Find a player profile</p>
diff --git a/src/components/UnknownAvatar.tsx b/src/components/UnknownAvatar.tsx
new file mode 100644
index 0000000..61ce229
--- /dev/null
+++ b/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>
+  );
+}