102 lines
3.6 KiB
TypeScript
102 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import ImageSmall from '@/components/image/ImageSmall';
|
|
import Spinner from '@/components/Spinner';
|
|
import { getIdFromStorageUrl } from '@/platforms/storage';
|
|
import { clsx } from 'clsx/lite';
|
|
import { FaRegCircleCheck } from 'react-icons/fa6';
|
|
import { pathForAdminUploadUrl } from '@/app/paths';
|
|
import AddButton from './AddButton';
|
|
import { UrlAddStatus } from './AdminUploadsClient';
|
|
import ResponsiveDate from '@/components/ResponsiveDate';
|
|
import DeleteBlobButton from './DeleteUploadButton';
|
|
|
|
export default function AdminUploadsTable({
|
|
isAdding,
|
|
urlAddStatuses,
|
|
setUrlAddStatuses,
|
|
}: {
|
|
isAdding?: boolean
|
|
urlAddStatuses: UrlAddStatus[]
|
|
setUrlAddStatuses?: (urlAddStatuses: UrlAddStatus[]) => void
|
|
}) {
|
|
const isComplete = urlAddStatuses.every(({ status }) => status === 'added');
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
{urlAddStatuses.map(({ url, status, statusMessage, uploadedAt }) =>
|
|
<div key={url}>
|
|
<div className={clsx(
|
|
'flex items-center gap-2 w-full min-h-8',
|
|
)}>
|
|
<div
|
|
className={clsx(
|
|
'flex items-center grow gap-2',
|
|
'transition-opacity',
|
|
isAdding && !isComplete && status !== 'adding' && 'opacity-30',
|
|
)}
|
|
>
|
|
<div className={clsx(
|
|
'shrink-0 transition-transform',
|
|
isAdding && !isComplete && status === 'adding' &&
|
|
'translate-x-[-2px] scale-[1.125] shadow-lg',
|
|
isAdding && !isComplete && status !== 'adding' &&
|
|
'scale-90',
|
|
)}>
|
|
<ImageSmall
|
|
src={url}
|
|
alt={url}
|
|
aspectRatio={3.0 / 2.0}
|
|
className={clsx(
|
|
'rounded-[3px] overflow-hidden',
|
|
'border-main',
|
|
)}
|
|
/>
|
|
</div>
|
|
<span className="grow min-w-0">
|
|
<div className="overflow-hidden text-ellipsis">
|
|
{getIdFromStorageUrl(url)}
|
|
</div>
|
|
<div className="text-dim overflow-hidden text-ellipsis">
|
|
{isAdding || isComplete
|
|
? status === 'added'
|
|
? 'Added'
|
|
: status === 'adding'
|
|
? statusMessage ?? 'Adding ...'
|
|
: 'Waiting'
|
|
: uploadedAt
|
|
? <ResponsiveDate date={uploadedAt} />
|
|
: '—'}
|
|
</div>
|
|
</span>
|
|
</div>
|
|
<span className="flex items-center gap-2">
|
|
{isAdding || isComplete
|
|
? <>
|
|
{status === 'added'
|
|
? <FaRegCircleCheck size={18} />
|
|
: status === 'adding'
|
|
? <Spinner
|
|
size={19}
|
|
className="translate-y-[2px]"
|
|
/>
|
|
: <span className="pr-1.5 text-dim">
|
|
—
|
|
</span>}
|
|
</>
|
|
: <>
|
|
<AddButton path={pathForAdminUploadUrl(url)} />
|
|
<DeleteBlobButton
|
|
urls={[url]}
|
|
shouldRedirectToAdminPhotos={urlAddStatuses.length <= 1}
|
|
onDelete={() => setUrlAddStatuses?.(urlAddStatuses.filter(
|
|
({ url: urlToRemove }) => urlToRemove !== url,
|
|
))}
|
|
/>
|
|
</>}
|
|
</span>
|
|
</div>
|
|
</div>)}
|
|
</div>
|
|
);
|
|
} |