Started to work the shortcodes

2025-01-24 18:07:04 +01:00
parent 78ce2b533b
commit f1a49eea83
19 changed files with 713 additions and 38 deletions
--- a/frontend/components/shortcode-dialogue.tsx
+++ b/frontend/components/shortcode-dialogue.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import type IShortcode from "@/interfaces/IShortcode";
+
+interface ShortcodeDialogProps {
+	onSave: (shortcode: Omit<IShortcode, "id">) => void;
+}
+
+export default function ShortcodeDialog({ onSave }: ShortcodeDialogProps) {
+	const [open, setOpen] = useState(false);
+	const [code, setCode] = useState("");
+	const [type, setType] = useState<"value" | "media">("value");
+	const [value, setValue] = useState("");
+	const [mediaId, setMediaId] = useState("");
+
+	const handleSave = () => {
+		onSave({ code, type, value, media_id: mediaId });
+		setOpen(false);
+		resetForm();
+	};
+
+	const resetForm = () => {
+		setCode("");
+		setType("value");
+		setValue("");
+		setMediaId("");
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="outline">Add New Shortcode</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-[425px]">
+				<DialogHeader>
+					<DialogTitle>Add New Shortcode</DialogTitle>
+					<DialogDescription>
+						Create a new shortcode here. Click save when you're
+						done.
+					</DialogDescription>
+				</DialogHeader>
+				<div className="grid gap-4 py-4">
+					<div className="grid grid-cols-4 items-center gap-4">
+						<Label htmlFor="code" className="text-right">
+							Code
+						</Label>
+						<Input
+							id="code"
+							value={code}
+							onChange={(e) => setCode(e.target.value)}
+							className="col-span-3"
+						/>
+					</div>
+					<Tabs
+						defaultValue={type}
+						onValueChange={(v) => setType(v as "value" | "media")}
+						className="w-full"
+					>
+						<TabsList className="grid w-full grid-cols-2">
+							<TabsTrigger value="value">Value</TabsTrigger>
+							<TabsTrigger value="media">Media</TabsTrigger>
+						</TabsList>
+						<TabsContent value="value">
+							<div className="grid grid-cols-4 items-center gap-4">
+								<Label htmlFor="value" className="text-right">
+									Value
+								</Label>
+								<Input
+									id="value"
+									value={value}
+									onChange={(e) => setValue(e.target.value)}
+									className="col-span-3"
+								/>
+							</div>
+						</TabsContent>
+						<TabsContent value="media">
+							<div className="grid grid-cols-4 items-center gap-4">
+								<Label htmlFor="mediaId" className="text-right">
+									Media ID
+								</Label>
+								<Input
+									id="mediaId"
+									value={mediaId}
+									onChange={(e) => setMediaId(e.target.value)}
+									className="col-span-3"
+								/>
+							</div>
+						</TabsContent>
+					</Tabs>
+				</div>
+				<DialogFooter>
+					<Button type="submit" onClick={handleSave}>
+						Save shortcode
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}