31 lines
991 B
TypeScript
31 lines
991 B
TypeScript
|
import React, { type FC } from 'react'
|
||
|
|
import type { CalendarItemProps } from '../types'
|
||
|
|
import cn from '@/utils/classnames'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
|
||
|
|
const Item: FC<CalendarItemProps> = ({
|
||
|
|
day,
|
||
|
|
selectedDate,
|
||
|
|
onClick,
|
||
|
|
}) => {
|
||
|
|
const { date, isCurrentMonth } = day
|
||
|
|
const isSelected = selectedDate?.isSame(date, 'date')
|
||
|
|
const isToday = date.isSame(dayjs(), 'date')
|
||
|
|
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={() => onClick(date)}
|
||
|
|
className={cn(
|
||
|
|
'relative px-1 py-2 rounded-lg flex items-center justify-center system-sm-medium',
|
||
|
|
isCurrentMonth ? 'text-text-secondary' : 'text-text-quaternary hover:text-text-secondary',
|
||
|
|
isSelected ? 'text-components-button-primary-text system-sm-medium bg-components-button-primary-bg' : 'hover:bg-state-base-hover',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{date.date()}
|
||
|
|
{isToday && <div className='absolute bottom-1 mx-auto w-1 h-1 rounded-full bg-components-button-primary-bg' />}
|
||
|
|
</button>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default React.memo(Item)
|