diff --git a/src/photo/PhotoHeader.tsx b/src/photo/PhotoHeader.tsx index 4a1780f6..3e13c662 100644 --- a/src/photo/PhotoHeader.tsx +++ b/src/photo/PhotoHeader.tsx @@ -8,13 +8,11 @@ import { import ShareButton from '@/components/ShareButton'; import AnimateItems from '@/components/AnimateItems'; import { ReactNode } from 'react'; -import { - HIGH_DENSITY_GRID, - SHOW_PHOTO_TITLE_FALLBACK_TEXT, -} from '@/site/config'; +import { HIGH_DENSITY_GRID } from '@/site/config'; import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid'; import PhotoPrevNext from './PhotoPrevNext'; import PhotoLink from './PhotoLink'; +import { formatDate } from '@/utility/date'; export default function PhotoHeader({ tag, @@ -80,14 +78,14 @@ export default function PhotoHeader({ - {entity ?? ( - (selectedPhoto?.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT) - ? - : <>X of X - )} + {entity ?? (selectedPhoto + ? + {selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')} + + : undefined)} PREV @@ -133,7 +133,7 @@ export default function PhotoPrevNext({ prefetch > NEXT diff --git a/src/utility/date.ts b/src/utility/date.ts index f758dd8f..fdbe6454 100644 --- a/src/utility/date.ts +++ b/src/utility/date.ts @@ -1,5 +1,6 @@ import { format, parseISO, parse } from 'date-fns'; +const DATE_STRING_FORMAT_TINY = 'dd MMM yy'; const DATE_STRING_FORMAT_SHORT = 'dd MMM yyyy'; const DATE_STRING_FORMAT_MEDIUM = 'dd MMM yy h:mma'; const DATE_STRING_FORMAT = 'dd MMM yyyy h:mma'; @@ -7,10 +8,12 @@ const DATE_STRING_FORMAT_POSTGRES = 'yyyy-MM-dd HH:mm:ss'; type AmbiguousTimestamp = number | string; -type Length = 'short' | 'medium' | 'long'; +type Length = 'tiny' | 'short' | 'medium' | 'long'; export const formatDate = (date: Date, length: Length = 'long') => { switch (length) { + case 'tiny': + return format(date, DATE_STRING_FORMAT_TINY); case 'short': return format(date, DATE_STRING_FORMAT_SHORT); case 'medium':