aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-21 15:24:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

ally: making categories drop-down & project cards keyboard navigatable

Browse Source
This commit is contained in:
MTG2000
2022-05-06 11:52:43 +03:00
parent dd172f1c86
commit dd2674a1d9
2 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,7 +10,12 @@ interface Props {
export default function ProjectCardMini({ project, onClick }: Props) {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(project.id)}>
<div
className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100"
onClick={() => onClick(project.id)}
onKeyDown={e => e.key !== 'Enter' || onClick(project.id)}
tabIndex={0}
>
<img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
<div className="justify-around items-start min-w-0">
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>