44 lines
1.5 KiB
TypeScript
44 lines
1.5 KiB
TypeScript
|
import Image from 'next/image';
|
||
|
|
import Link from 'next/link';
|
||
|
|
import Button from '@/components/uikit/button';
|
||
|
|
import { useTranslations } from 'next-intl';
|
||
|
|
import routeFactory from '@/assets/constants/routeFactory';
|
||
|
|
import { IProjectThumbResponseData } from '@/app/api/projects/data';
|
||
|
|
import { TLocales } from '@/models/layout';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
project: IProjectThumbResponseData;
|
||
|
|
locale: TLocales;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ProjectThumb = ({ project, locale }: Props) => {
|
||
|
|
const t = useTranslations();
|
||
|
|
const routes = routeFactory(t, locale);
|
||
|
|
return (
|
||
|
|
<div className="group flex flex-col gap-3 overflow-hidden bg-white md:gap-5">
|
||
|
|
<div className="relative aspect-[1.4] w-full overflow-hidden rounded-2xl">
|
||
|
|
<Image
|
||
|
|
src={project.imageSrc}
|
||
|
|
alt={project.title}
|
||
|
|
fill
|
||
|
|
className="h-auto w-full object-cover"
|
||
|
|
/>
|
||
|
|
<div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
|
||
|
|
<Button endIcon="showMore" link={routes.project.route(project.id)}>
|
||
|
|
{t('com_home_projects_details_CTA')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Link
|
||
|
|
href={routes.project.route(project.id)}
|
||
|
|
className="group-hover:text-primary mb-4 text-center text-gray-500"
|
||
|
|
>
|
||
|
|
<h2 className="text-base font-medium">{project.title}</h2>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ProjectThumb;
|