19 lines
679 B
TypeScript

import { cn } from '@repo/ui/lib/utils';
import { formatTime } from '@repo/utils/datetime-format';
type TimeRangeProps = {
readonly className?: string;
readonly timeEnd: null | string | undefined;
readonly timeStart: null | string | undefined;
};
export function ReadonlyTimeRange({ className, timeEnd, timeStart }: Readonly<TimeRangeProps>) {
return (
<div className={cn('flex flex-row items-center gap-2 text-lg font-bold', className)}>
<span className="tracking-wider">{timeStart ? formatTime(timeStart).user() : 'xx:xx'}</span>
{' - '}
<span className="tracking-wider">{timeEnd ? formatTime(timeEnd).user() : 'xx:xx'}</span>
</div>
);
}