diff --git a/src/app/admin/photos/page.tsx b/src/app/admin/photos/page.tsx index b59a38f8..cb8f78bf 100644 --- a/src/app/admin/photos/page.tsx +++ b/src/app/admin/photos/page.tsx @@ -33,6 +33,7 @@ import { PRO_MODE_ENABLED } from '@/site/config'; import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus'; import IconGrSync from '@/site/IconGrSync'; import { getStoragePhotoUrlsNoStore } from '@/services/storage/cache'; +import PhotoDate from '@/photo/PhotoDate'; const DEBUG_PHOTO_BLOBS = false; @@ -103,7 +104,7 @@ export default async function AdminPhotosPage({ 'lg:w-[50%] uppercase', 'text-dim', )}> - {photo.takenAtNaive} +
+ {/* Mobile */} + + {formatDate(date, true)} + + {/* Desktop */} + + {formatDate(date)} + + + ); +} diff --git a/src/photo/PhotoDate.tsx b/src/photo/PhotoDate.tsx new file mode 100644 index 00000000..c2a9ea24 --- /dev/null +++ b/src/photo/PhotoDate.tsx @@ -0,0 +1,17 @@ +import ResponsiveDate from '@/components/ResponsiveDate'; +import { Photo } from '.'; +import { useMemo } from 'react'; + +export default function PhotoDate({ + photo: { takenAtNaive }, +}: { + photo: Photo +}) { + const date = useMemo(() => { + const date = new Date(takenAtNaive); + return isNaN(date.getTime()) ? new Date() : date; + }, [takenAtNaive]); + return ( + + ); +} diff --git a/src/site/CommandK.tsx b/src/site/CommandK.tsx index 523207bf..b006f7b6 100644 --- a/src/site/CommandK.tsx +++ b/src/site/CommandK.tsx @@ -21,7 +21,6 @@ import { authCached } from '@/auth/cache'; import { getPhotos } from '@/services/vercel-postgres'; import { getKeywordsForPhoto, photoQuantityText, titleForPhoto } from '@/photo'; import PhotoTiny from '@/photo/PhotoTiny'; -import { formatDate } from '@/utility/date'; import { formatCount, formatCountDescriptive } from '@/utility/string'; import { BiLockAlt, BiSolidUser } from 'react-icons/bi'; import { sortTagsObject } from '@/tag'; @@ -31,6 +30,7 @@ import { TbPhoto } from 'react-icons/tb'; import { IoMdCamera } from 'react-icons/io'; import { HiDocumentText } from 'react-icons/hi'; import { signOutAction } from '@/auth/actions'; +import PhotoDate from '@/photo/PhotoDate'; export default async function CommandK() { const [ @@ -147,14 +147,7 @@ export default async function CommandK() { items: photos.map(photo => ({ label: titleForPhoto(photo), keywords: getKeywordsForPhoto(photo), - annotation: <> - - {formatDate(photo.takenAt)} - - - {formatDate(photo.takenAt, true)} - - , + annotation: , accessory: , path: pathForPhoto(photo), })),