strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fallback to dates in photo nav

Browse Source
This commit is contained in:
Sam Becker 2024-09-01 12:22:42 -05:00
parent dcc5df0a40
commit ae8da21ae5
3 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/photo/PhotoHeader.tsx
View File

@ -8,13 +8,11 @@ import {
import ShareButton from '@/components/ShareButton'; import ShareButton from '@/components/ShareButton';
import AnimateItems from '@/components/AnimateItems'; import AnimateItems from '@/components/AnimateItems';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { import { HIGH_DENSITY_GRID } from '@/site/config';
HIGH_DENSITY_GRID,
SHOW_PHOTO_TITLE_FALLBACK_TEXT,
} from '@/site/config';
import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid'; import DivDebugBaselineGrid from '@/components/DivDebugBaselineGrid';
import PhotoPrevNext from './PhotoPrevNext'; import PhotoPrevNext from './PhotoPrevNext';
import PhotoLink from './PhotoLink'; import PhotoLink from './PhotoLink';
import { formatDate } from '@/utility/date';
export default function PhotoHeader({ export default function PhotoHeader({
tag, tag,
@ -80,14 +78,14 @@ export default function PhotoHeader({
<span className={clsx( <span className={clsx(
'inline-flex uppercase col-span-2 md:col-span-1', 'inline-flex uppercase col-span-2 md:col-span-1',
)}> )}>
{entity ?? ( {entity ?? (selectedPhoto
(selectedPhoto?.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT) ? <PhotoLink
? <PhotoLink photo={selectedPhoto}
photo={selectedPhoto} className="uppercase font-bold"
className="uppercase font-bold" >
/> {selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')}
: <>X of X</> </PhotoLink>
)} : undefined)}
</span> </span>
<span className={clsx( <span className={clsx(
'inline-flex', 'inline-flex',

4
src/photo/PhotoPrevNext.tsx
View File

@ -114,7 +114,7 @@ export default function PhotoPrevNext({
prefetch prefetch
> >
<FiChevronLeft <FiChevronLeft
className="sm:hidden text-[1.2rem] translate-y-[-1.5px]" className="sm:hidden text-[1.1rem] translate-y-[-1px]"
/> />
<span className="hidden sm:inline-block">PREV</span> <span className="hidden sm:inline-block">PREV</span>
</PhotoLink> </PhotoLink>
@ -133,7 +133,7 @@ export default function PhotoPrevNext({
prefetch prefetch
> >
<FiChevronRight <FiChevronRight
className="sm:hidden text-[1.2rem] translate-y-[-1.5px]" className="sm:hidden text-[1.1rem] translate-y-[-1px]"
/> />
<span className="hidden sm:inline-block">NEXT</span> <span className="hidden sm:inline-block">NEXT</span>
</PhotoLink> </PhotoLink>

5
src/utility/date.ts
View File

@ -1,5 +1,6 @@
import { format, parseISO, parse } from 'date-fns'; 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_SHORT = 'dd MMM yyyy';
const DATE_STRING_FORMAT_MEDIUM = 'dd MMM yy h:mma'; const DATE_STRING_FORMAT_MEDIUM = 'dd MMM yy h:mma';
const DATE_STRING_FORMAT = 'dd MMM yyyy 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 AmbiguousTimestamp = number | string;
type Length = 'short' | 'medium' | 'long'; type Length = 'tiny' | 'short' | 'medium' | 'long';
export const formatDate = (date: Date, length: Length = 'long') => { export const formatDate = (date: Date, length: Length = 'long') => {
switch (length) { switch (length) {
case 'tiny':
return format(date, DATE_STRING_FORMAT_TINY);
case 'short': case 'short':
return format(date, DATE_STRING_FORMAT_SHORT); return format(date, DATE_STRING_FORMAT_SHORT);
case 'medium': case 'medium':