aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2025-12-17 06:14:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: (project card): handle non-existent imgs

Browse Source
This commit is contained in:
MTG\mtg09
2023-05-04 16:00:08 +04:00
parent 26ea566653
commit 38a6681a86
1 changed files with 45 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx
View File

@@ -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>
);
}