66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { ArrowUpDown, Star } from 'lucide-react';
|
|
|
|
const InstructorsTableColumn = (translate: LanguageTranslations): ColumnDef<Instructor>[] => {
|
|
const { table } = translate;
|
|
|
|
return [
|
|
{
|
|
accessorKey: 'user.name',
|
|
header: ({ column }) => (
|
|
<Button type="button" variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{table.instructor}
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center space-x-2">
|
|
<Avatar className="h-8 w-8">
|
|
<AvatarImage src={row.original.user.photo || ''} alt={row.original.user.name} className="object-cover" />
|
|
<AvatarFallback>{row.original.user.name.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
<span className="capitalize">{row.original.user.name}</span>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'total_enrollments',
|
|
header: ({ column }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Button type="button" variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{table.enrollments}
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="text-center">
|
|
<p>{row.original.total_enrollments_count}</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'average_rating',
|
|
header: ({ column }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Button type="button" variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{table.rating}
|
|
<ArrowUpDown className="ml-2 h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="flex items-center justify-center gap-1 text-center">
|
|
<p>{Number(row.original.total_average_rating).toFixed(1)}</p>
|
|
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
|
<span className="text-muted-foreground text-sm">({row.original.total_reviews_count})</span>
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
};
|
|
|
|
export default InstructorsTableColumn;
|