78 lines
2.0 KiB
TypeScript
78 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useMemo } from 'react';
|
|
import type { ColumnDef } from '@tanstack/react-table';
|
|
|
|
import { UploadActionsMenu } from './UploadActionsMenu';
|
|
import { UploadThumbnail } from './UploadThumbnail';
|
|
import { formatUploadedAt, getUploadStatus } from './uploadUtils';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import type { UploadVideo } from '@/types';
|
|
|
|
interface UseUploadColumnsProps {
|
|
onViewVideo: (upload: UploadVideo) => void;
|
|
onViewDetails: (upload: UploadVideo) => void;
|
|
}
|
|
|
|
export function useUploadColumns({
|
|
onViewVideo,
|
|
onViewDetails,
|
|
}: UseUploadColumnsProps) {
|
|
return useMemo<ColumnDef<UploadVideo>[]>(
|
|
() => [
|
|
{
|
|
id: 'thumbnail',
|
|
header: 'Thumbnail',
|
|
size: 140,
|
|
minSize: 120,
|
|
enableSorting: false,
|
|
meta: { disableTruncate: true },
|
|
cell: ({ row }) => (
|
|
<UploadThumbnail upload={row.original} className="w-28" />
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'filename',
|
|
header: 'Filename',
|
|
cell: ({ row }) => (
|
|
<span className="font-medium">{row.original.filename}</span>
|
|
),
|
|
},
|
|
{
|
|
id: 'status',
|
|
header: 'Status',
|
|
size: 130,
|
|
cell: ({ row }) => (
|
|
<Badge className="rounded-full">
|
|
{getUploadStatus(row.original)}
|
|
</Badge>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'uploaded_at',
|
|
header: 'Uploaded At',
|
|
cell: ({ row }) => formatUploadedAt(row.original.uploaded_at),
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <span className="sr-only">Actions</span>,
|
|
size: 56,
|
|
minSize: 56,
|
|
enableSorting: false,
|
|
enableHiding: false,
|
|
meta: { disableTruncate: true },
|
|
cell: ({ row }) => (
|
|
<div className="flex justify-center">
|
|
<UploadActionsMenu
|
|
upload={row.original}
|
|
onViewVideo={onViewVideo}
|
|
onViewDetails={onViewDetails}
|
|
/>
|
|
</div>
|
|
),
|
|
},
|
|
],
|
|
[onViewDetails, onViewVideo],
|
|
);
|
|
}
|