diff options
Diffstat (limited to 'src/components/common/DateDisplay.tsx')
| -rw-r--r-- | src/components/common/DateDisplay.tsx | 28 |
1 files changed, 28 insertions, 0 deletions
diff --git a/src/components/common/DateDisplay.tsx b/src/components/common/DateDisplay.tsx new file mode 100644 index 0000000..0bece8a --- /dev/null +++ b/src/components/common/DateDisplay.tsx @@ -0,0 +1,28 @@ +import { Icon, Row, Text } from '@umami/react-zen'; +import { differenceInDays, isSameDay } from 'date-fns'; +import { useLocale } from '@/components/hooks'; +import { Calendar } from '@/components/icons'; +import { formatDate } from '@/lib/date'; + +export function DateDisplay({ startDate, endDate }) { + const { locale } = useLocale(); + const isSingleDate = differenceInDays(endDate, startDate) === 0; + + return ( + <Row gap="3" alignItems="center" wrap="nowrap"> + <Icon> + <Calendar /> + </Icon> + <Text wrap="nowrap"> + {isSingleDate ? ( + formatDate(startDate, 'PP', locale) + ) : ( + <> + {formatDate(startDate, 'PP', locale)} + {!isSameDay(startDate, endDate) && ` — ${formatDate(endDate, 'PP', locale)}`} + </> + )} + </Text> + </Row> + ); +} |