Started to work the shortcodes

frontend/components/shortcodes-table.tsx

@@ -0,0 +1,102 @@
+"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>
+	);
+}