42 lines
883 B
TypeScript
42 lines
883 B
TypeScript
import { formatDate } from '@/utility/date';
|
|
import { clsx } from 'clsx/lite';
|
|
|
|
export default function ResponsiveDate({
|
|
date,
|
|
className,
|
|
titleLabel,
|
|
}: {
|
|
date: Date
|
|
className?: string
|
|
titleLabel?: string
|
|
}) {
|
|
const title = titleLabel
|
|
? `${titleLabel}: ${formatDate(date).toLocaleUpperCase()}`
|
|
: formatDate(date).toLocaleUpperCase();
|
|
return (
|
|
<span
|
|
title={title}
|
|
className={clsx(className, 'uppercase')}
|
|
>
|
|
{/* Small */}
|
|
<span
|
|
className="xs:hidden"
|
|
aria-hidden
|
|
>
|
|
{formatDate(date, 'short')}
|
|
</span>
|
|
{/* Medium */}
|
|
<span
|
|
className="hidden xs:inline-block sm:hidden"
|
|
aria-hidden
|
|
>
|
|
{formatDate(date, 'medium')}
|
|
</span>
|
|
{/* Large */}
|
|
<span className="hidden sm:inline-block">
|
|
{formatDate(date)}
|
|
</span>
|
|
</span>
|
|
);
|
|
}
|