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

16
src/photo/PhotoHeader.tsx
View File

@ -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({
<span className={clsx(
'inline-flex uppercase col-span-2 md:col-span-1',
)}>
{entity ?? (
(selectedPhoto?.title || SHOW_PHOTO_TITLE_FALLBACK_TEXT)
{entity ?? (selectedPhoto
? <PhotoLink
photo={selectedPhoto}
className="uppercase font-bold"
/>
: <>X of X</>
)}
>
{selectedPhoto.title || formatDate(selectedPhoto.takenAt, 'tiny')}
</PhotoLink>
: undefined)}
</span>
<span className={clsx(
'inline-flex',

4
src/photo/PhotoPrevNext.tsx
View File

@ -114,7 +114,7 @@ export default function PhotoPrevNext({
prefetch
>
<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>
</PhotoLink>
@ -133,7 +133,7 @@ export default function PhotoPrevNext({
prefetch
>
<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>
</PhotoLink>

5
src/utility/date.ts
View File

@ -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':