67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { Link } from 'react-router-dom';
|
|
|
|
import { KeenIcon } from '@/components';
|
|
import { toAbsoluteUrl } from '@/utils/Assets';
|
|
|
|
interface IWorkProps {
|
|
image: string;
|
|
title: string;
|
|
description?: string;
|
|
authorAvatar: string;
|
|
authorName: string;
|
|
likes: number;
|
|
comments: number;
|
|
}
|
|
|
|
const CardWork = ({ image, title, authorAvatar, authorName, likes, comments }: IWorkProps) => {
|
|
return (
|
|
<div className="card border-0">
|
|
<img
|
|
src={toAbsoluteUrl(`/media/images/600x400/${image}`)}
|
|
className="w-full h-auto rounded-t-xl"
|
|
alt=""
|
|
/>
|
|
|
|
<div className="card-border card-rounded-b flex flex-col gap-2 px-5 py-4.5">
|
|
<Link
|
|
to="/public-profile/profiles/company"
|
|
className="text-lg font-medium text-gray-900 hover:text-primary"
|
|
>
|
|
{title}
|
|
</Link>
|
|
|
|
<div className="flex items-center justify-between grow">
|
|
<div className="flex items-center grow">
|
|
<img
|
|
src={toAbsoluteUrl(`/media/avatars/${authorAvatar}`)}
|
|
className="rounded-full size-7 me-2"
|
|
alt=""
|
|
/>
|
|
|
|
<Link
|
|
to="/public-profile/profiles/nft"
|
|
className="text-2sm text-gray-800 hover:text-primary mb-px"
|
|
>
|
|
{authorName}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="flex gap-3 items-center">
|
|
<div className="flex gap-1 items-center">
|
|
<KeenIcon icon="heart" className="text-base text-gray-500" />
|
|
<span className="text-2sm text-gray-800 py-2">{likes}</span>
|
|
</div>
|
|
|
|
<div className="flex gap-1 items-center">
|
|
<KeenIcon icon="messages" className="text-base text-gray-500" />
|
|
<span className="text-2sm text-gray-800 py-2">{comments}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { CardWork, type IWorkProps };
|