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