57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
|
|
||
|
|
import React from 'react'
|
||
|
|
import Styles from "./styles.module.scss"
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { formatDateTime, getConstellation } from '@/lib/utils'
|
||
|
|
|
||
|
|
export default function RecentTXNs({tabs, data, setTabs}:{tabs:number, data:any[] | undefined, setTabs(value:any):void}) {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<React.Fragment>
|
||
|
|
<div className={tabs===2?`${Styles.recentTXNs}`:`${Styles.recentTXNs} ${Styles.hidden}`}>
|
||
|
|
<div className={Styles.head}>
|
||
|
|
Stellar Births
|
||
|
|
<svg className='absolute top-2.5 right-2.5 cursor-pointer' onClick={()=>setTabs(0)}
|
||
|
|
width={28} height={28} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<g id="SVGRepo_bgCarrier" strokeWidth="0"></g>
|
||
|
|
<g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round"></g>
|
||
|
|
<g id="SVGRepo_iconCarrier">
|
||
|
|
<path d="M7 17L16.8995 7.10051" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
|
||
|
|
<path d="M7 7.00001L16.8995 16.8995" stroke="#42edf8" strokeLinecap="round" strokeLinejoin="round"></path>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
<div className='w-full bg-[#010913F3] border-l border-t border-[#0c67a1]'>
|
||
|
|
<div className='grid grid-cols-5 bg-[#010913F3]'>
|
||
|
|
<div className={Styles.th}>Name</div>
|
||
|
|
<div className={`${Styles.td} col-span-2`}>Constellation Name</div>
|
||
|
|
<div className={`${Styles.td} col-span-2`}>Creation Time</div>
|
||
|
|
</div>
|
||
|
|
<div className='max-h-[338px] overflow-y-auto'
|
||
|
|
style={{
|
||
|
|
scrollbarWidth: "none"
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{
|
||
|
|
data?.map((item, index )=><Item key={index} data={item}/>)
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className={Styles.footer}/>
|
||
|
|
</div>
|
||
|
|
</React.Fragment>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
const Item = ({data}:any) =>{
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link target='_blank' href={`https://solscan.io/tx/${data.transaction_signature}`}>
|
||
|
|
<div className='grid grid-cols-5 cursor-pointer'>
|
||
|
|
<div className={Styles.td}><strong>{data.star_name}</strong></div>
|
||
|
|
<div className={`${Styles.td} capitalize col-span-2`}>{getConstellation(data.transaction_id)}</div>
|
||
|
|
<div className={`${Styles.td} capitalize col-span-2`}>{formatDateTime(data.time)}</div>
|
||
|
|
</div>
|
||
|
|
</Link>
|
||
|
|
)
|
||
|
|
}
|