57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { KeenIcon } from '@/components';
|
|
import { toAbsoluteUrl } from '@/utils/Assets';
|
|
|
|
interface INFTProps {
|
|
image: string;
|
|
title: string;
|
|
id: number;
|
|
info: string;
|
|
date: string;
|
|
}
|
|
|
|
const CardNFT = ({ image, id, title, info, date }: INFTProps) => {
|
|
return (
|
|
<div className="card shadow-none border-0 mb-5">
|
|
<div
|
|
className="rounded-t-xl w-[280px] h-[240px] bg-cover bg-center"
|
|
style={{ backgroundImage: `url(${toAbsoluteUrl(`/media/images/600x600/${image}`)})` }}
|
|
></div>
|
|
|
|
<div className="card-border card-rounded-b px-3.5 pt-5 pb-3.5">
|
|
<div className="pb-6">
|
|
<a
|
|
href="#"
|
|
className="block font-medium text-gray-900 hover:text-primary text-md leading-4 mb-2"
|
|
>
|
|
{title}
|
|
</a>
|
|
<div className="text-2sm text-gray-700">
|
|
Token ID:
|
|
<span className="text-2sm font-medium text-gray-800"> {id}</span>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-2 items-center">
|
|
<div className="flex flex-col gap-2">
|
|
<span className="text-2sm text-gray-700">Current bid</span>
|
|
|
|
<div className="flex items-center gap-1">
|
|
<KeenIcon icon="xmr" className="text-lg text-brand leading-none" />
|
|
<span className="text-sm font-semibold text-gray-900 leading-none tracking-tight">
|
|
{info}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col justify-self-end text-end gap-2">
|
|
<span className="text-2sm text-gray-700">Ending in</span>
|
|
<span className="text-2sm font-semibold text-gray-900 leading-none tracking-tight">
|
|
{date}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { CardNFT, type INFTProps };
|