| 1 | /** |
| 2 | * CalendarLunarText 组件 |
| 3 | * |
| 4 | * 功能描述: 日历中的农历日期文本，和公历日期保持同一视觉层级 |
| 5 | */ |
| 6 | |
| 7 | 'use client' |
| 8 | |
| 9 | import type { CalendarLunarInfo } from '../calendarFestival.utils' |
| 10 | import { memo } from 'react' |
| 11 | import { useTransClient } from '@/app/i18n/client' |
| 12 | import { cn } from '@/utils/className' |
| 13 | |
| 14 | export interface ICalendarLunarTextProps { |
| 15 | lunar: CalendarLunarInfo | null |
| 16 | selected?: boolean |
| 17 | compact?: boolean |
| 18 | className?: string |
| 19 | } |
| 20 | |
| 21 | const CalendarLunarText = memo<ICalendarLunarTextProps>( |
| 22 | ({ lunar, selected = false, compact = false, className }) => { |
| 23 | const { t } = useTransClient('account') |
| 24 | |
| 25 | if (!lunar) { |
| 26 | return null |
| 27 | } |
| 28 | |
| 29 | const lunarText = lunar.day === 1 ? t(lunar.monthKey) : t(lunar.dayKey) |
| 30 | |
| 31 | return ( |
| 32 | <span |
| 33 | className={cn( |
| 34 | 'inline-flex min-w-0 items-center leading-none tracking-tight', |
| 35 | compact ? 'text-[10px] font-medium' : 'text-xs font-medium', |
| 36 | selected ? 'text-primary-foreground/85' : 'text-muted-foreground', |
| 37 | className, |
| 38 | )} |
| 39 | title={t(lunar.titleKey)} |
| 40 | aria-label={t(lunar.titleKey)} |
| 41 | > |
| 42 | <span className="truncate"> |
| 43 | {lunar.isLeap && t(lunar.leapPrefixKey)} |
| 44 | {lunarText} |
| 45 | </span> |
| 46 | </span> |
| 47 | ) |
| 48 | }, |
| 49 | ) |
| 50 | |
| 51 | CalendarLunarText.displayName = 'CalendarLunarText' |
| 52 | |
| 53 | export default CalendarLunarText |
| 54 |