103 lines
2.5 KiB
TypeScript
103 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { MoreHorizontal } from "lucide-react";
|
|
import type IShortcode from "@/interfaces/IShortcode";
|
|
import ShortcodeDialog from "@/components/shortcode-dialogue";
|
|
|
|
interface ShortcodeTableProps {
|
|
shortcodes: IShortcode[];
|
|
onUpdate: (shortcode: IShortcode) => void;
|
|
onDelete: (id: string) => void;
|
|
onAdd: (shortcode: Omit<IShortcode, "id">) => void;
|
|
}
|
|
|
|
export function ShortcodeTable({
|
|
shortcodes,
|
|
onUpdate,
|
|
onDelete,
|
|
onAdd,
|
|
}: ShortcodeTableProps) {
|
|
return (
|
|
<div>
|
|
<div className="mb-4">
|
|
<ShortcodeDialog onSave={onAdd} />
|
|
</div>
|
|
<div className="rounded-md border">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>ID</TableHead>
|
|
<TableHead>Code</TableHead>
|
|
<TableHead>Type</TableHead>
|
|
<TableHead>Value</TableHead>
|
|
<TableHead>Media ID</TableHead>
|
|
<TableHead className="w-[80px]">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{shortcodes.map((shortcode) => (
|
|
<TableRow key={shortcode.id}>
|
|
<TableCell>{shortcode.id}</TableCell>
|
|
<TableCell>{shortcode.code}</TableCell>
|
|
<TableCell>{shortcode.type}</TableCell>
|
|
<TableCell>
|
|
{shortcode.value || "N/A"}
|
|
</TableCell>
|
|
<TableCell>
|
|
{shortcode.media_id || "N/A"}
|
|
</TableCell>
|
|
<TableCell>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
className="h-8 w-8 p-0"
|
|
>
|
|
<span className="sr-only">
|
|
Open menu
|
|
</span>
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
onUpdate(shortcode)
|
|
}
|
|
>
|
|
Update
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem
|
|
onClick={() =>
|
|
onDelete(shortcode.code)
|
|
}
|
|
>
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|