Anjing Webshells

Website : rimsha.abasa.com
: / var / www / talha_silentcontent / src / components / Batches /
Filename : columns.tsx
back
// @ts-nocheck

import { ColumnDef } from "@tanstack/react-table"
import Link from "next/link"
import { Checkbox } from "@/components/ui/checkbox"
import { Button } from "../ui/button"

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Keywords = {
  _id: string
  keyword: string
  article: string
  status: "not started" | "in process" | "complete" | "failed"
}

let articleLink: string;

export const columns: ColumnDef<Keywords>[] = [
    {
      id: "select",
      header: ({ table }: { table: any }) => (
        <Checkbox
          checked={table.getIsAllPageRowsSelected()}
          onCheckedChange={(value: any) =>
            table.toggleAllPageRowsSelected(!!value)
          }
          aria-label="Select all"
        />
      ),
      cell: ({ row }: { row: any }) => {
        const articleId: string = row.getValue("_id");
        return (
          <Checkbox
            checked={row.getIsSelected()}
            name={`${articleId}`}
            onCheckedChange={(value: any) => row.toggleSelected(!!value)}
            aria-label="Select row"
          />
        );
      },
      enableSorting: false,
      disableResizing: true,
    },
    {
      accessorKey: "_id",
      header: "ID",
      cell: ({ row }: { row: any }) => {
        const sequentialNumber = row.index + 1;
        let articleId: string = row.getValue("_id");
        return <div>{sequentialNumber}</div>;
      },
    },
    {
      accessorKey: "keyword",
      header: "Keyword",
    },
    {
      accessorKey: "article",
      header: "Article",
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row }: { row: any }) => {
        let articleStatus: string = row.getValue("status");
        let color = "bg-green-500";
        if (articleStatus === "not started") {
          color = "bg-blue-300";
        } else if (articleStatus === "in progress") {
          color = "bg-orange-400";
        }
        return (
          <div
            className={`${color} py-2 px-1 text-xs text-white text-center rounded-lg`}
          >
            {articleStatus}
          </div>
        );
      },
    },
  ];