From 38a6681a86b0f3e32840c2e2dddd97881277749e Mon Sep 17 00:00:00 2001
From: "MTG\\mtg09" <mtg.software.dev@gmail.com>
Date: Thu, 4 May 2023 16:00:08 +0400
Subject: [PATCH] fix: (project card): handle non-existent imgs

---
 .../ProjectCardMini/ProjectCardMini.tsx       | 75 +++++++++++--------
 1 file changed, 45 insertions(+), 30 deletions(-)

diff --git a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
index fd3c916..2e36019 100644
--- a/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
+++ b/src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
@@ -1,41 +1,56 @@
-import { MdLocalFireDepartment } from "react-icons/md";
-import { numberFormatter } from "src/utils/helperFunctions";
 import { ProjectCard } from "src/utils/interfaces";
 
-
 interface Props {
-    project: ProjectCard
-    onClick: (projectId: string) => void
+  project: ProjectCard;
+  onClick: (projectId: string) => void;
 }
 
 export default function ProjectCardMini({ project, onClick }: Props) {
+  const tag = project.tags?.[0];
+  const logo =
+    project?.logo?.[0]?.["thumbnails"]?.["large"]?.url ??
+    `https://avatars.dicebear.com/api/initials/${project.title}.svg`;
 
-    const tag = project.tags?.[0];
-    const logo = project?.logo?.[0]['thumbnails']['large'].url ?? `https://avatars.dicebear.com/api/initials/${project.title}.svg`
-
-
-    return (
-        <div
-            className="py-16 select-none px-16 flex items-center gap-16 rounded-16  hover:bg-gray-50 hover:outline active:scale-95 transition-transform outline-1 outline-gray-200"
-            onKeyDown={e => {
-                e.key !== 'Enter' || onClick(project?.id!)
-            }}
-            onClick={(e) => { e.currentTarget.focus(); onClick(project?.id!) }}
-            tabIndex={0}
-            role='button'
-        >
-            <img src={logo} alt={project?.title ?? ''} draggable="false" className="flex-shrink-0 w-64 h-64 object-cover bg-gray-200 border border-gray-200 rounded-full hover:cursor-pointer"></img>
-            <div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer"
-            >
-                <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project?.title}</p>
-                <p className="text-body5 text-gray-600 font-light mt-4"><span className={`scale-150 inline-block ${project.dead ? "text-red-500" : "text-green-400"}`}>•</span> {tag?.name}</p>
-                {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project?.votes_count)} </span> */}
-            </div>
-            {/* <VoteButton votes={project?.votes_count} direction='vertical' dense onVote={vote}></VoteButton> */}
-            {/* <div className="flex flex-col text-gray-400 items-center">
+  return (
+    <div
+      className="py-16 select-none px-16 flex items-center gap-16 rounded-16  hover:bg-gray-50 hover:outline active:scale-95 transition-transform outline-1 outline-gray-200"
+      onKeyDown={(e) => {
+        e.key !== "Enter" || onClick(project?.id!);
+      }}
+      onClick={(e) => {
+        e.currentTarget.focus();
+        onClick(project?.id!);
+      }}
+      tabIndex={0}
+      role="button"
+    >
+      <img
+        src={logo}
+        alt={project?.title ?? ""}
+        draggable="false"
+        className="flex-shrink-0 w-64 h-64 object-cover bg-gray-200 border border-gray-200 rounded-full hover:cursor-pointer"
+      ></img>
+      <div className="justify-around items-start min-w-0 flex-1 hover:cursor-pointer">
+        <p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">
+          {project?.title}
+        </p>
+        <p className="text-body5 text-gray-600 font-light mt-4">
+          <span
+            className={`scale-150 inline-block ${
+              project.dead ? "text-red-500" : "text-green-400"
+            }`}
+          >
+            •
+          </span>{" "}
+          {tag?.name}
+        </p>
+        {/* <span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {numberFormatter(project?.votes_count)} </span> */}
+      </div>
+      {/* <VoteButton votes={project?.votes_count} direction='vertical' dense onVote={vote}></VoteButton> */}
+      {/* <div className="flex flex-col text-gray-400 items-center">
                 <MdLocalFireDepartment />
                 <span className="text-body6">{numberFormatter(project?.votes_count)}</span>
             </div> */}
-        </div>
-    );
+    </div>
+  );
 }