import React, { type FC } from 'react'
|
import cn from '@/utils/classnames'
|
|
type ItemProps = {
|
titleWidth: string
|
releaseNotesWidth: string
|
isFirst: boolean
|
isLast: boolean
|
}
|
|
const Item: FC<ItemProps> = ({
|
titleWidth,
|
releaseNotesWidth,
|
isFirst,
|
isLast,
|
}) => {
|
return (
|
<div className='relative flex gap-x-1 p-2' >
|
{!isLast && <div className='absolute left-4 top-6 h-[calc(100%-0.75rem)] w-0.5 bg-divider-subtle' />}
|
<div className=' flex h-5 w-[18px] shrink-0 items-center justify-center'>
|
<div className='h-2 w-2 rounded-lg border-[2px] border-text-quaternary' />
|
</div>
|
<div className='flex grow flex-col gap-y-0.5'>
|
<div className='flex h-3.5 items-center'>
|
<div className={cn('h-2 w-full rounded-sm bg-text-quaternary opacity-20', titleWidth)} />
|
</div>
|
{
|
!isFirst && (
|
<div className='flex h-3 items-center'>
|
<div className={cn('h-1.5 w-full rounded-sm bg-text-quaternary opacity-20', releaseNotesWidth)} />
|
</div>
|
)
|
}
|
</div>
|
</div>
|
|
)
|
}
|
|
export default React.memo(Item)
|
