web-humas-fe/components/table/magazine/magazine-table.tsx

"use client";
import {
    TableCell,
    TableRow,
    Table,
    TableHeader,
    TableColumn,
    TableBody,
    Pagination,
    Dropdown,
    DropdownTrigger,
    DropdownMenu,
    DropdownItem,
    Input,
    User,
    Card,
    Divider,
    Chip,
    ChipProps,
} from "@nextui-org/react";
import { Button } from "@nextui-org/button";
import React, { Key, useCallback, useMemo, useState } from "react";
import {
    AddIcon,
    CreateIconIon,
    DeleteIcon,
    DotsYIcon,
    EyeFilledIcon,
    EyeIconMdi,
} from "@/components/icons";
import Link from "next/link";

type UserObject = {
    id: number;
    title: string;
    status: string;
    description: string;
    avatar: string;
};

const statusColorMap = {
    active: "success",
    paused: "danger",
    vacation: "warning",
};


export default function MagazineTable() {
    type TableRow = (typeof magazineTable)[0];

    const columns = [

        { name: "Title", uid: "title" },
        { name: "Description", uid: "description" },
        { name: "Action", uid: "actions" },
    ];

    const magazineTable = [
        {
            id: 1,
            title: "Proses pembuatan website humas ",
            status: "active",
            description: "Pembuatan website Humas adalah sebuah proses yang strategis untuk membangun identitas digital sebuah organisasi atau entitas, yang bertujuan untuk menyebarkan informasi kepada publik, memperkuat citra merek, serta menjaga keterbukaan dan transparansi. Proses ini melibatkan beberapa tahapan yang terstruktur dan terkoordinasi dengan baik",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 2,
            title: "Proses pembuatan website humas ",
            status: "active",
            description: "Pembuatan website Humas adalah sebuah proses yang strategis untuk membangun identitas digital sebuah organisasi atau entitas, yang bertujuan untuk menyebarkan informasi kepada publik, memperkuat citra merek, serta menjaga keterbukaan dan transparansi. Proses ini melibatkan beberapa tahapan yang terstruktur dan terkoordinasi dengan baik",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 3,
            title: "Proses pembuatan website humas ",
            status: "active",
            description: "Pembuatan website Humas adalah sebuah proses yang strategis untuk membangun identitas digital sebuah organisasi atau entitas, yang bertujuan untuk menyebarkan informasi kepada publik, memperkuat citra merek, serta menjaga keterbukaan dan transparansi. Proses ini melibatkan beberapa tahapan yang terstruktur dan terkoordinasi dengan baik",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 4,
            title: "Proses pembuatan website humas ",
            status: "active",
            description: "Pembuatan website Humas adalah sebuah proses yang strategis untuk membangun identitas digital sebuah organisasi atau entitas, yang bertujuan untuk menyebarkan informasi kepada publik, memperkuat citra merek, serta menjaga keterbukaan dan transparansi. Proses ini melibatkan beberapa tahapan yang terstruktur dan terkoordinasi dengan baik",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
        {
            id: 5,
            title: "Proses pembuatan website humas ",
            status: "active",
            description: "Pembuatan website Humas adalah sebuah proses yang strategis untuk membangun identitas digital sebuah organisasi atau entitas, yang bertujuan untuk menyebarkan informasi kepada publik, memperkuat citra merek, serta menjaga keterbukaan dan transparansi. Proses ini melibatkan beberapa tahapan yang terstruktur dan terkoordinasi dengan baik",
            avatar: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSa8Luglga9J2R3Bxt_PsWZISUHQWODD6_ZTAJ5mIQgxYCAE-YbkY81faTqp-hSA_jVPTs&usqp=CAU",
        },
    ];

    const renderCell = useCallback((magazine: TableRow, columnKey: Key) => {
        const cellValue = magazine[columnKey as keyof UserObject];
        const statusColorMap: Record<string, ChipProps["color"]> = {
            active: "primary",
            cancel: "danger",
            pending: "success",
        };

        switch (columnKey) {
            case "no":
                return (
                    <div>{magazine.id}</div>
                )

            case "title":
                return (
                    <div className="w-[350px]">{magazine.title}</div>
                )

            case "description":
                return (
                    <div className="">{magazine.description}</div>
                )

            case "status":
                return (
                    <Chip
                        className="capitalize "
                        color={statusColorMap[magazine.status]}
                        size="lg"
                        variant="flat"
                    >
                        <div className="flex flex-row items-center gap-2 justify-center">
                            {cellValue}
                        </div>
                    </Chip>
                );

            case "actions":
                return (
                    <div className="relative flex justify-star items-center gap-2">
                        <Dropdown className="lg:min-w-[150px] bg-black text-white shadow border ">
                            <DropdownTrigger>
                                <Button isIconOnly size="lg" variant="light">
                                    <DotsYIcon className="text-default-300" />
                                </Button>
                            </DropdownTrigger>
                            <DropdownMenu>
                                <DropdownItem
                                >
                                    <Link
                                        href={`/admin/magazine/detail`}
                                    >
                                        <EyeIconMdi className="inline mr-2 mb-1" />
                                        Detail
                                    </Link>
                                </DropdownItem>
                                <DropdownItem
                                >
                                    <Link
                                        href={`#`}
                                    >
                                        <CreateIconIon className="inline mr-2 mb-1" />
                                        Edit
                                    </Link>
                                </DropdownItem>
                                <DropdownItem
                                >
                                    <Link
                                        href={`#`}
                                    >
                                        <DeleteIcon
                                            width={20}
                                            height={16}
                                            className="inline mr-2 mb-1"
                                        />
                                        Delete
                                    </Link>
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </div>
                );

            default:
                return cellValue;
        }
    }, []);

    return (
        <>
            <div className="mx-3 mb-5 mt-3">
                <Link href="/admin/magazine/create" >
                    <Button className="my-3 bg-blue-600 text-white" ><CreateIconIon />Create New Magazine</Button>
                </Link>
                <div className="flex flex-col items-center rounded-2xl">
                    <Table
                        // selectionMode="multiple"
                        aria-label="micro issue table"
                        className="rounded-xl"
                        classNames={{
                            th: "bg-white dark:bg-black text-black dark:text-white border-b-1 text-md",
                            base: "bg-white dark:bg-black border",
                            wrapper: "min-h-[50px] bg-transpararent text-black dark:text-white ",
                        }}
                    >
                        <TableHeader columns={columns}>
                            {(column) => (
                                <TableColumn key={column.uid}>{column.name}</TableColumn>
                            )}
                        </TableHeader>
                        <TableBody items={magazineTable} emptyContent={"No data to display."}>
                            {(item) => (
                                <TableRow key={item.id}>
                                    {(columnKey) => (
                                        <TableCell>{renderCell(item, columnKey)}</TableCell>
                                    )}
                                </TableRow>
                            )}
                        </TableBody>
                    </Table>
                </div>
            </div>

        </>
    );
}