import React from 'react' import classnames from 'classnames' import { globalProps, GlobalProps } from '../utilities/globalProps' import { buildAriaProps, buildDataProps } from '../utilities/props' import DateTime from '../pb_kit/dateTime'; import Body from '../pb_body/_body' import Caption from '../pb_caption/_caption' import Icon from '../pb_icon/_icon' type TimeRangeInlineProps = { aria?: { [key: string]: string }, className?: string, id?: string, data?: { [key: string]: string }, alignment?: "left" | "center" | "vertical", size?: "sm" | "xs", dark?: boolean, icon?: boolean, timezone?: boolean, startTime: Date, endTime: Date, } & GlobalProps const timezoneString = (dateValue: Date) => { return `${DateTime.toTimeZone(dateValue)}` } const dateTimestamp = (dateValue: Date) => { return `${DateTime.toHour(dateValue)}:${DateTime.toMinute(dateValue)}${DateTime.toMeridiem(dateValue)}` } const dateTimeIso = (dateValue: Date) => { return DateTime.toIso(dateValue) } const TimeRangeInline = (props: TimeRangeInlineProps) => { const { aria = {}, className, data = {}, alignment = 'left', size = 'sm', dark = false, icon = false, timezone = false, startTime, endTime, id, } = props const dataProps: { [key: string]: string } = buildDataProps(data) const ariaProps: { [key: string]: string } = buildAriaProps(aria) const separator = ( ) const iconContent = () => { return ( icon && ) } return (

{size == 'xs' && <> {iconContent()} {` ${dateTimestamp( startTime )} `} {separator} {` ${dateTimestamp( endTime )} `} {timezone && {timezoneString(endTime)} } } {size == 'sm' && <> {iconContent()} {` ${dateTimestamp( startTime )} `} {separator} {` ${dateTimestamp( endTime )} `} {timezone && {timezoneString(endTime)} } }

) } export default TimeRangeInline