50 lines
1.4 KiB
TypeScript
50 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
interface CalloutCardProps {
|
|
iconUrl: string;
|
|
token: string;
|
|
ca: string;
|
|
priceAtCreation: number;
|
|
priceNow: number;
|
|
gains: number;
|
|
dexUrl: string;
|
|
}
|
|
|
|
const CalloutCard: React.FC<CalloutCardProps> = ({
|
|
iconUrl,
|
|
token,
|
|
ca,
|
|
priceAtCreation,
|
|
priceNow,
|
|
gains,
|
|
dexUrl
|
|
}) => {
|
|
const truncateAddress = (address: string) => {
|
|
return `${address.slice(0, 6)}...${address.slice(-5)}`;
|
|
};
|
|
|
|
return (
|
|
<a href={dexUrl} target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="block">
|
|
<div className={`glassmorphism rounded-full m-2 grid grid-cols-4 h-20 max-w-96 flex justify-center`}>
|
|
<img src={iconUrl} className="rounded-full m-2 flex h-16 w-16" />
|
|
<div className='grid grid-rows-2'>
|
|
<div className='items-end justify-start text-center flex font-bold'>
|
|
{token}
|
|
</div>
|
|
<p className='text-xs items-start mt-1 flex justify-start ml-1'>
|
|
{truncateAddress(ca)}
|
|
</p>
|
|
</div>
|
|
<div className='grid grid-rows-2 col-span-2 justify-end mx-5'>
|
|
<p className='items-end flex text-xs text-nowrap mb-1'>{`$${priceAtCreation} => $${priceNow}`}</p>
|
|
<p className={`justify-end flex 00 font-bold ${gains > 0 ? 'text-green-700' : 'text-red-700'}`}>{`${(gains * 100).toFixed(2)}%`}</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default CalloutCard;
|