Spaces:
Paused
Paused
File size: 3,578 Bytes
43dd1ac 8f24b44 92864d8 43dd1ac 8f24b44 c90a662 43dd1ac 8f24b44 43dd1ac 92864d8 43dd1ac 92864d8 43dd1ac 92864d8 43dd1ac 8f24b44 43dd1ac 92864d8 43dd1ac f854364 43dd1ac e411e71 43dd1ac c90a662 b9ae471 c90a662 8f24b44 c90a662 43dd1ac |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
"use client"
import {
ColumnDef,
ColumnFiltersState,
SortingState,
VisibilityState,
flexRender,
getCoreRowModel,
getFacetedRowModel,
getFacetedUniqueValues,
getFilteredRowModel,
getPaginationRowModel,
getSortedRowModel,
useReactTable,
} from "@tanstack/react-table"
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table"
import { columns } from "@/components/business/videos/columns"
import { Video } from "@/app/types"
import { useState } from "react"
export function VideosQueue({
videos = [],
onSelectVideo,
}: {
videos: Video[]
onSelectVideo: (task: Video) => void
}) {
const [rowSelection, setRowSelection] = useState({})
const [columnVisibility, setColumnVisibility] =
useState<VisibilityState>({})
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>(
[]
)
const [sorting, setSorting] = useState<SortingState>([])
const table = useReactTable({
data: videos,
columns: columns as ColumnDef<Video, any>[],
state: {
sorting,
columnVisibility,
rowSelection,
columnFilters,
},
enableRowSelection: true,
onRowSelectionChange: setRowSelection,
onSortingChange: setSorting,
onColumnFiltersChange: setColumnFilters,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getSortedRowModel: getSortedRowModel(),
getFacetedRowModel: getFacetedRowModel(),
getFacetedUniqueValues: getFacetedUniqueValues(),
})
return (
<div className="rounded-lg border">
<Table>
<TableHeader>
{table.getHeaderGroups().map((headerGroup) => (
<TableRow key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<TableHead key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext()
)}
</TableHead>
)
})}
</TableRow>
))}
</TableHeader>
<TableBody>
{table.getRowModel().rows?.length ? (
table.getRowModel().rows.map((row) => (
<TableRow
key={row.original.id}
data-state={row.getIsSelected() && "selected"}
>
{row.getVisibleCells().map((cell) => (
<TableCell key={cell.id}
className="cursor-pointer"
onClick={() => {
const videoId = `${row.getValue("id") || ""}`
const video = videos.find(({ id }) => id === videoId)
if (video) {
onSelectVideo(video)
}
}}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</TableCell>
))}
</TableRow>
))
) : (
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
>
No recent video.
</TableCell>
</TableRow>
)}
</TableBody>
</Table>
</div>
)
} |