final touch

components/ProfilePhoto.tsx

@@ -6,7 +6,7 @@ type Props = {
   className?: string;
   priority?: boolean;
   name?: string;
-  dimensionClass?: string;
+  large?: boolean;
 };
 
 export default function ProfilePhoto({
@@ -14,7 +14,7 @@ export default function ProfilePhoto({
   className,
   priority,
   name,
-  dimensionClass,
+  large,
 }: Props) {
   const [image, setImage] = useState("");
 
@@ -30,14 +30,14 @@ export default function ProfilePhoto({
   return !image ? (
     <div
       className={`avatar drop-shadow-md placeholder ${className || ""} ${
-        dimensionClass || "w-8 h-8 "
+        large ? "w-28 h-28" : "w-8 h-8"
       }`}
     >
       <div className="bg-base-100 text-neutral rounded-full w-full h-full ring-2 ring-neutral-content select-none">
         {name ? (
           <span className="text-2xl capitalize">{name.slice(0, 1)}</span>
         ) : (
-          <i className="bi-person text-xl"></i>
+          <i className={`bi-person ${large ? "text-5xl" : "text-xl"}`}></i>
         )}
       </div>
     </div>
@@ -45,7 +45,7 @@ export default function ProfilePhoto({
     <div
       className={`avatar skeleton rounded-full drop-shadow-md ${
         className || ""
-      } ${dimensionClass || "w-8 h-8 "}`}
+      } ${large || "w-8 h-8"}`}
     >
       <div className="rounded-full w-full h-full ring-2 ring-neutral-content">
         <Image