Design: 텍스트 overflow 설정

This commit is contained in:
jhynsoo 2024-09-27 15:59:03 +09:00
parent 6eb4b2ecb5
commit 210c8d35a9

View File

@ -12,9 +12,9 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
return (
<Link
to={to}
className="relative flex w-[327px] cursor-pointer items-start gap-4 overflow-hidden rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
className="relative flex w-[327px] cursor-pointer items-start gap-4 rounded-lg border border-gray-200 bg-white p-4 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50"
>
<div className="flex h-24 w-24 items-center justify-center rounded-lg bg-gray-100">
<div className="flex h-24 w-24 shrink-0 items-center justify-center rounded-lg bg-gray-100">
{imageUrl ? (
<img
src={imageUrl}
@ -25,7 +25,7 @@ export default function ProjectCard({ title, description, imageUrl = '', to = ''
<Compass className="h-8 w-8 text-gray-500" />
)}
</div>
<div className="flex flex-1 flex-col items-start gap-1">
<div className="flex flex-col items-start gap-1 overflow-hidden">
<div className="font-sans text-lg leading-tight text-black dark:text-white">{title}</div>
<div className="text-sm leading-tight text-gray-500 dark:text-gray-400">{description}</div>
</div>