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..." />;
|
|
}
|