Remco
e85e4d74ea
Local Build and Deploy / deploy (push) Successful in 1m11s
revert style: clean up code with prettier and eslint
82 lines
2.0 KiB
TypeScript
82 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
import { Pencil } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import { DataTable } from '@/components/admin/data-table'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import type { DataTableColumn, PaginatedResult } from '@/types'
|
|
|
|
interface EventRow {
|
|
id: number
|
|
title: string
|
|
typeName: string
|
|
typeColor: string
|
|
startsAt: Date
|
|
endsAt: Date | null
|
|
status: string
|
|
hostUserId: number
|
|
}
|
|
|
|
const statusVariants: Record<string, 'default' | 'secondary' | 'outline' | 'destructive'> = {
|
|
published: 'default',
|
|
draft: 'secondary',
|
|
cancelled: 'destructive',
|
|
completed: 'outline',
|
|
}
|
|
|
|
function getColumns(): DataTableColumn<EventRow>[] {
|
|
return [
|
|
{ key: 'id', label: 'ID', sortable: true },
|
|
{
|
|
key: 'title',
|
|
label: 'Title',
|
|
sortable: true,
|
|
render: (value) => <span className="font-medium">{String(value)}</span>,
|
|
},
|
|
{
|
|
key: 'typeName',
|
|
label: 'Type',
|
|
sortable: false,
|
|
render: (_, row) => (
|
|
<Badge style={{ backgroundColor: row.typeColor, color: '#fff' }}>{row.typeName}</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: 'startsAt',
|
|
label: 'Starts',
|
|
sortable: true,
|
|
render: (value) => (
|
|
<span className="text-sm">{new Date(value as unknown as string).toLocaleString()}</span>
|
|
),
|
|
},
|
|
{
|
|
key: 'status',
|
|
label: 'Status',
|
|
sortable: true,
|
|
render: (value) => (
|
|
<Badge variant={statusVariants[String(value)] ?? 'secondary'}>{String(value)}</Badge>
|
|
),
|
|
},
|
|
{
|
|
key: 'actions',
|
|
label: 'Actions',
|
|
render: (_, row) => (
|
|
<Button variant="ghost" size="icon" asChild>
|
|
<Link href={`/admin/events/${row.id}`}>
|
|
<Pencil className="h-4 w-4" />
|
|
</Link>
|
|
</Button>
|
|
),
|
|
},
|
|
]
|
|
}
|
|
|
|
interface EventsTableProps {
|
|
data: PaginatedResult<EventRow>
|
|
}
|
|
|
|
export function EventsTable({ data }: EventsTableProps) {
|
|
return <DataTable data={data} columns={getColumns()} searchPlaceholder="Search events..." />
|
|
}
|